/* ==========================================================================
   MunroSpeakUp - public site styling (Speak Up designs)
   Loaded by Pages/Shared/_Layout.cshtml AFTER bootstrap.min.css and site.css.
   Everything is scoped under body.msu-public, so the admin area (which uses
   _AdminLayout.cshtml and does not load this file) is unaffected.
   ========================================================================== */

/* Brand palette (design system). Only these hex values are used in this file;
   everything below refers to the tokens, never to raw colours. */
:root {
    /* Primary - dark / light blue */
    --primary-200: #E1E7E9; /* Light Blue 50% */
    --primary-300: #C4CED4; /* Light Blue */
    --primary-600: #89929B; /* Dark Blue 50% */
    --primary-800: #142537; /* Dark Blue */
    /* Secondary - taupe / beige */
    --secondary-200: #EFEBE1; /* Beige */
    --secondary-600: #BFB2A2; /* Taupe */
    /* Neutrals */
    --neutrals-50: #FFFFFF; /* White */
    --neutrals-200: #F5F5F5; /* Light Grey */
    --neutrals-600: #333333; /* Dark Grey */
    --neutrals-700: #2E2E2E;
    --neutrals-800: #1C1C1C;
    /* Functional */
    --functional-red: #D37467;
    --functional-orange: #EDA665;
    --functional-green: #6BAF7E;
    /* Roles used by the components below */
    --msu-navy: var(--primary-800);
    --msu-navy-hover: var(--neutrals-800);
    --msu-navy-active: var(--neutrals-800);
    --msu-ink: var(--primary-800); /* headings, labels, values */
    --msu-text: var(--neutrals-600); /* body copy */
    --msu-muted: #142537; /* helper text - kept dark for AA contrast */
    --msu-subtle: var(--primary-600); /* placeholders, icons, inactive tabs */
    --msu-band: var(--neutrals-200);
    --msu-soft: var(--neutrals-200);
    --msu-soft-hover: var(--primary-200);
    --msu-soft-active: var(--primary-300);
    --msu-surface: var(--neutrals-50);
    --msu-border: var(--primary-300);
    --msu-border-strong: var(--primary-600);
    --msu-divider: var(--primary-200);
    --msu-danger: var(--functional-red);
    --msu-radius-lg: 16px;
    --msu-radius: 10px;
    --msu-radius-sm: 10px;
    --msu-focus: 0 0 0 0.2rem var(--primary-300);
}

/* ---------- Base ---------- */
/* Font family is intentionally not set here - it comes from site.css. */
body.msu-public {
    --bs-body-color: var(--msu-text);
    --bs-body-bg: var(--msu-surface);
    --bs-link-color: var(--msu-navy);
    --bs-link-color-rgb: 20, 37, 55; /* = --primary-800 */
    --bs-link-hover-color: var(--msu-navy-hover);
    --bs-link-hover-color-rgb: 28, 28, 28; /* = --neutrals-800 */
    --bs-secondary-color: var(--msu-muted);
    --bs-border-color: var(--msu-border);
    color: var(--msu-text);
    background: var(--msu-surface);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.msu-public .msu-main {
    flex: 1 0 auto;
}

.msu-public h1,
.msu-public h2,
.msu-public h3 {
    color: var(--msu-ink);
}

/* ---------- Header ---------- */
.msu-public .msu-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--msu-surface);
}

.msu-public .msu-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* equal side columns keep the logo centred */
    align-items: center;
    gap: 12px;
    min-height: 64px;
    width: 100%;
    padding-inline: 48px;
}

@media (max-width: 991.98px) {
    .msu-public .msu-header-inner {
        padding-inline: 24px;
    }
}

.msu-public .msu-header .header__logo {
    grid-column: 2;
    display: inline-flex;
    position: static;
    margin: 0;
    transform: none;
    line-height: 0;
}

    .msu-public .msu-header .header__logo svg {
        display: block;
        height: 46px;
        width: auto;
    }

        .msu-public .msu-header .header__logo svg path {
            fill: var(--msu-navy);
        }

    .msu-public .msu-header .header__logo:focus-visible {
        outline: 2px solid var(--msu-navy);
        outline-offset: 4px;
        border-radius: 4px;
    }

.msu-public .msu-lang {
    grid-column: 3;
    justify-self: end;
    margin: 0;
    min-width: 0;
}

/* Language dropdown (Bootstrap dropdown; the real <select> is visually hidden) */
.msu-public .msu-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-width: 7.5rem;
    justify-content: space-between;
    padding: 8px 16px 8px 16px;
    border: 1px solid var(--msu-border);
    border-radius: 999px;
    background: var(--neutrals-50);
    color: var(--msu-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

    .msu-public .msu-lang-toggle > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .msu-public .msu-lang-toggle svg {
        flex-shrink: 0;
        transition: transform 0.15s ease;
    }

    .msu-public .msu-lang-toggle:hover,
    .msu-public .msu-lang-toggle[aria-expanded="true"] {
        border-color: var(--primary-800);
    }

        .msu-public .msu-lang-toggle[aria-expanded="true"] svg {
            transform: rotate(180deg);
        }

    .msu-public .msu-lang-toggle:focus-visible {
        outline: none;
        box-shadow: var(--msu-focus);
    }

.msu-public .msu-lang-menu,
.msu-public .msu-select-menu {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-padding-y: 8px;
    --bs-dropdown-bg: var(--neutrals-50);
    --bs-dropdown-border-color: var(--primary-800);
    --bs-dropdown-border-radius: var(--msu-radius-sm);
    --bs-dropdown-link-color: var(--msu-text);
    --bs-dropdown-link-hover-color: var(--msu-ink);
    --bs-dropdown-link-hover-bg: var(--neutrals-200);
    --bs-dropdown-link-active-color: var(--msu-ink);
    --bs-dropdown-link-active-bg: var(--neutrals-50);
    --bs-dropdown-item-padding-x: 24px;
    --bs-dropdown-item-padding-y: 16px;
    max-height: min(70vh, 34rem);
    overflow-y: auto;
}

/* Name on the left, radio circle on the right - like the design.
   Shared by the language menu and the form dropdowns (msu-select.js). */
.msu-public .msu-lang-item,
.msu-public .msu-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    /* Dropdown value text */
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.28px;
    white-space: nowrap;
}

    .msu-public .msu-lang-item::after,
    .msu-public .msu-option::after {
        content: "";
        flex-shrink: 0;
        width: 13px;
        height: 13px;
        border: 1px solid var(--msu-text);
        border-radius: 50%;
        background: var(--neutrals-50);
    }

    .msu-public .msu-lang-item.active::after,
    .msu-public .msu-option.active::after {
        border-color: var(--primary-800);
        background: var(--primary-800);
        box-shadow: inset 0 0 0 3px var(--neutrals-50);
    }

    .msu-public .msu-lang-item.active,
    .msu-public .msu-option.active {
        font-weight: 700; /* selected value only */
    }

    .msu-public .msu-lang-item:focus-visible,
    .msu-public .msu-option:focus-visible {
        outline: 2px solid var(--primary-800);
        outline-offset: -2px;
        background: var(--neutrals-200);
    }

/* Form dropdowns built by wwwroot/js/msu-select.js from <select data-msu-select>.
   The toggle looks like a .form-select; the open list reuses the language-menu styles above. */
.msu-public .msu-select {
    position: relative;
}

.msu-public .msu-select-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    border: 1px solid var(--msu-border);
    border-radius: var(--msu-radius-sm);
    background: var(--neutrals-50);
    color: var(--msu-ink);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

    .msu-public .msu-select-toggle > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .msu-public .msu-select-toggle svg {
        flex-shrink: 0;
        transition: transform 0.15s ease;
    }

    .msu-public .msu-select-toggle.msu-select-placeholder > span {
        color: var(--msu-subtle);
    }

    .msu-public .msu-select-toggle:hover,
    .msu-public .msu-select-toggle[aria-expanded="true"] {
        border-color: var(--primary-800);
    }

        .msu-public .msu-select-toggle[aria-expanded="true"] svg {
            transform: rotate(180deg);
        }

    .msu-public .msu-select-toggle:focus-visible {
        outline: none;
        border-color: var(--primary-800);
        box-shadow: var(--msu-focus);
    }

    .msu-public .msu-select-toggle.msu-select-invalid {
        border-color: var(--msu-danger);
    }

.msu-public .msu-select-menu {
    --bs-dropdown-min-width: 100%;
    --bs-dropdown-item-padding-x: 16px;
    --bs-dropdown-item-padding-y: 8px;
    max-height: min(50vh, 22rem);
}

    .msu-public .msu-select-menu .msu-option {
        white-space: normal;
    }

/* Searchable variant (data-msu-select-search) - the country list.
   Search box pinned at the top, bold names, grey row for the current choice. */
.msu-public .msu-select-menu-search {
    --bs-dropdown-padding-y: 0;
    --bs-dropdown-link-active-bg: var(--neutrals-200);
    padding-bottom: 8px;
    max-height: min(60vh, 26rem);
}

.msu-public .msu-select-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px;
    background: var(--neutrals-50);
}

    .msu-public .msu-select-search .form-control {
        border-color: var(--primary-800);
        border-radius: var(--msu-radius-sm);
        padding: 8px 16px;
    }

        .msu-public .msu-select-search .form-control:focus {
            box-shadow: var(--msu-focus);
        }

.msu-public .msu-select-menu-search .msu-option {
    color: var(--msu-ink);
}

.msu-public .msu-select-empty {
    padding: 16px 16px 16px;
    font-size: 0.875rem;
    color: var(--msu-text);
}

/* ---------- Grey hero band + overlapping content ----------
   Spacing from the design spec:
   - 80px above the heading
   - 24px + 16px = 40px between the subtitle and the top of the cards
     (hero padding-bottom minus --msu-overlap = 40px)
   - heading/subtitle block max 768px wide (336px each side in the 1440px frame)
   - 16px gap between the cards (Bootstrap g-3 on the row) */
.msu-public {
    --msu-overlap: 96px;
    --msu-hero-to-cards: 40px; /* 24px + 16px from the design spec - both grid values */
}

    .msu-public .msu-hero {
        background: var(--msu-band);
        text-align: center;
        padding: 48px 0 calc(var(--msu-hero-to-cards) + var(--msu-overlap));
    }

        .msu-public .msu-hero > .container {
            max-width: 768px;
        }

    .msu-public .msu-hero-short {
        padding-top: 48px;
    }

    .msu-public .msu-hero-title {
        font-size: 48px;
        font-weight: 700;
        letter-spacing: 0.96px;
        line-height: 55px;
        margin-bottom: 8px;
    }

    .msu-public .msu-hero-title-sm {
        font-size: 24px;
        font-weight: 700;
        line-height: 30px; /* 125% */
        letter-spacing: 0.48px;
        margin-bottom: 8px;
    }

    .msu-public .msu-hero-lead {
        font-size: 24px;
        font-weight: 700;
        line-height: 30px; /* 125% */
        letter-spacing: 0.48px;
        color: var(--msu-ink);
        margin: 0 auto;
    }

    .msu-public .msu-hero-sub {
        font-size: 0.875rem;
        color: var(--msu-muted);
        max-width: 32rem;
        line-height: 1.6;
        margin: 0 auto;
    }

    .msu-public .msu-hero-eyebrow {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--msu-muted);
        margin: 0;
    }

    .msu-public .msu-overlap {
        position: relative;
        margin-top: calc(var(--msu-overlap) * -1);
        padding-bottom: 72px;
    }

    .msu-public .container.msu-width-md {
        max-width: 744px;
    }

    .msu-public .container.msu-width-sm {
        max-width: 664px;
    }

    /* ---------- Cards ---------- */
    .msu-public .msu-card {
        background: var(--msu-surface);
        border: 1px solid var(--msu-border);
        border-radius: var(--msu-radius-lg);
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    }

    .msu-public .msu-card-body {
        padding: 24px;
    }

    .msu-public .msu-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 16px;
        border-top: 1px solid var(--msu-divider);
    }

    .msu-public .msu-card-intro {
        text-align: center;
        font-size: 0.875rem;
        color: var(--msu-text);
        margin: 0 0 16px;
    }

    /* Landing page entry cards */
    .msu-public .msu-entry {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 332px;
        padding: 16px 24px;
    }

    .msu-public .msu-entry-icon {
        display: grid;
        place-items: center;
        width: 80px;
        height: 80px;
        border-radius: 12px;
        background: var(--msu-soft);
        color: var(--msu-navy);
        margin-bottom: auto;
    }

    .msu-public .msu-entry-title {
        font-size: 1.125rem;
        font-weight: 700;
        margin: 32px 0 4px;
    }

    .msu-public .msu-entry-text {
        font-size: 0.875rem;
        line-height: 1.55;
        color: var(--msu-text);
        margin: 0 0 24px;
    }

    .msu-public .msu-note {
        text-align: center;
        font-size: 0.8125rem;
        color: var(--msu-muted);
        margin: 32px auto 0;
        max-width: 36rem;
    }

    /* ---------- Buttons ---------- */
    .msu-public .msu-btn {
        --bs-btn-padding-y: 8px;
        --bs-btn-padding-x: 24px;
        /* Button text */
        --bs-btn-font-size: 12px;
        --bs-btn-font-weight: 700;
        --bs-btn-line-height: 20px; /* 166.667% */
        --bs-btn-border-radius: 999px;
        --bs-btn-focus-shadow-rgb: 196, 206, 212; /* = --primary-300 */
        font-style: normal;
        letter-spacing: 0.24px;
    }

    .msu-public .msu-btn-primary {
        --bs-btn-color: var(--neutrals-50);
        --bs-btn-bg: var(--msu-navy);
        --bs-btn-border-color: var(--msu-navy);
        /* Hover inverts: white fill, Dark Blue border and text (same as .gridSystemBtnOne40:hover) */
        --bs-btn-hover-color: var(--primary-800);
        --bs-btn-hover-bg: var(--neutrals-50);
        --bs-btn-hover-border-color: var(--primary-800);
        /* Pressed keeps the same white look */
        --bs-btn-active-color: var(--primary-800);
        --bs-btn-active-bg: var(--neutrals-50);
        --bs-btn-active-border-color: var(--primary-800);
        --bs-btn-disabled-color: var(--neutrals-50);
        --bs-btn-disabled-bg: var(--msu-navy);
        --bs-btn-disabled-border-color: var(--msu-navy);
    }

    .msu-public .msu-btn-soft {
        --bs-btn-color: var(--msu-ink);
        --bs-btn-bg: var(--msu-soft);
        --bs-btn-border-color: var(--msu-soft);
        --bs-btn-hover-color: var(--msu-ink);
        --bs-btn-hover-bg: var(--msu-soft); /* background stays the same */
        --bs-btn-hover-border-color: var(--primary-800); /* only the border turns #142537 */
        --bs-btn-active-color: var(--msu-ink);
        --bs-btn-active-bg: var(--msu-soft);
        --bs-btn-active-border-color: var(--primary-800);
    }

    .msu-public .msu-btn-outline {
        --bs-btn-color: var(--msu-ink);
        --bs-btn-bg: var(--neutrals-50);
        --bs-btn-border-color: var(--msu-border);
        /* Hover turns it into the blue button: #142537 fill and border, white text */
        --bs-btn-hover-color: var(--neutrals-50);
        --bs-btn-hover-bg: var(--primary-800);
        --bs-btn-hover-border-color: var(--primary-800);
        --bs-btn-active-color: var(--neutrals-50);
        --bs-btn-active-bg: var(--primary-800);
        --bs-btn-active-border-color: var(--primary-800);
    }

    /* Choice chips: Bootstrap .btn-check radios restyled. Checked = navy fill. */
    .msu-public .msu-chip {
        --bs-btn-padding-y: 8px;
        --bs-btn-padding-x: 16px;
        /* Button text - same as .msu-btn */
        --bs-btn-font-size: 12px;
        --bs-btn-font-weight: 700;
        --bs-btn-line-height: 20px; /* 166.667% */
        --bs-btn-border-radius: var(--msu-radius-sm);
        font-style: normal;
        letter-spacing: 0.24px;
        --bs-btn-color: var(--msu-ink);
        --bs-btn-bg: var(--neutrals-50);
        --bs-btn-border-color: var(--msu-border);
        --bs-btn-hover-color: var(--msu-ink);
        --bs-btn-hover-bg: var(--msu-soft);
        --bs-btn-hover-border-color: var(--msu-border-strong);
        --bs-btn-active-color: var(--neutrals-50);
        --bs-btn-active-bg: var(--msu-navy);
        --bs-btn-active-border-color: var(--msu-navy);
        --bs-btn-focus-shadow-rgb: 196, 206, 212; /* = --primary-300 */
    }

    /* ---------- Step tabs (Bootstrap nav + tab-content) ---------- */
    .msu-public .msu-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        margin: 0;
        padding: 0 24px;
        list-style: none;
        border-bottom: 1px solid var(--msu-divider);
        overflow-x: auto;
        scrollbar-width: none;
    }

        .msu-public .msu-tabs .nav-link {
            position: relative;
            border: 0;
            border-radius: 0;
            background: none;
            color: var(--msu-subtle);
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 20px; /* 142.857% */
            letter-spacing: 0.28px;
            padding: 24px 16px;
            white-space: nowrap;
        }

            .msu-public .msu-tabs .nav-link:hover {
                color: var(--msu-ink);
            }

            .msu-public .msu-tabs .nav-link.active {
                color: var(--msu-ink);
            }

                .msu-public .msu-tabs .nav-link.active::after {
                    content: "";
                    position: absolute;
                    left: 8px;
                    right: 8px;
                    bottom: -1px;
                    height: 3px;
                    background: var(--msu-navy);
                }

            .msu-public .msu-tabs .nav-link:focus-visible {
                outline: 2px solid var(--msu-navy);
                outline-offset: -4px;
                border-radius: 6px;
            }

            /* Steps the visitor has not reached yet (set by concern-steps.js) */
            .msu-public .msu-tabs .nav-link.msu-locked {
                cursor: default;
                color: var(--msu-subtle);
            }

    .msu-public .tab-pane:focus {
        outline: none;
    }

    /* ---------- Form content ---------- */
    .msu-public .msu-group + .msu-group {
        border-top: 1px solid var(--msu-divider);
        margin-top: 24px;
        padding-top: 24px;
    }

    .msu-public .msu-step-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--msu-ink);
        margin: 0 0 16px;
    }

    .msu-public .msu-info {
        display: inline-flex;
        color: var(--msu-subtle);
        border-radius: 50%;
    }

        .msu-public .msu-info:hover,
        .msu-public .msu-info:focus {
            color: var(--msu-navy);
        }

    .msu-public .form-label {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px; /* 142.857% */
        color: var(--msu-ink);
        margin-bottom: 8px;
    }

    .msu-public .form-text {
        font-size: 0.8125rem;
        color: var(--msu-muted);
    }

    .msu-public .form-control,
    .msu-public .form-select {
        border-color: var(--msu-border);
        border-radius: var(--msu-radius-sm);
        color: var(--msu-ink);
        font-size: 0.875rem;
        padding-top: 8px;
        padding-bottom: 8px;
    }

        .msu-public .form-control::placeholder {
            color: var(--msu-subtle);
        }

        .msu-public .form-control:focus,
        .msu-public .form-select:focus {
            border-color: var(--msu-navy);
            box-shadow: var(--msu-focus);
        }

        .msu-public .form-control.input-validation-error,
        .msu-public .form-select.input-validation-error {
            border-color: var(--msu-danger);
        }

    .msu-public textarea.form-control {
        min-height: 168px;
        resize: vertical;
    }

    .msu-public .msu-field-narrow {
        max-width: 22rem;
    }

    .msu-public .text-danger {
        color: var(--msu-danger) !important;
    }

    /* Server-side (ModelOnly) error summary. Hidden while it has nothing in it. */
    .msu-public .msu-summary.validation-summary-valid {
        display: none;
    }

    .msu-public .msu-summary.validation-summary-errors {
        margin: 16px 16px 0;
        padding: 16px 16px;
        /* Palette has no tinted red, so: red border/accent, dark text for legibility */
        border: 1px solid var(--msu-danger);
        border-left-width: 4px;
        border-radius: var(--msu-radius-sm);
        background: var(--neutrals-50);
        color: var(--msu-text);
        font-size: 0.875rem;
    }

    .msu-public .msu-summary ul {
        margin: 0;
        padding-left: 16px;
    }

    /* ---------- Attachments drop zone (design: white card, left-aligned, full-width Upload bar) ---------- */
    .msu-public .msu-label-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 8px;
    }

        .msu-public .msu-label-row .form-label {
            margin-bottom: 0;
        }

    .msu-public .msu-optional {
        flex-shrink: 0;
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
        letter-spacing: 0.28px;
        color: var(--msu-subtle);
    }

    .msu-public .msu-dropzone {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        min-height: 208px;
        padding: 16px;
        border: 1px solid var(--msu-border);
        border-radius: var(--msu-radius);
        background: var(--neutrals-50);
        text-align: left;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }


        /* While files are dragged over the box (class set by concern-steps.js) */
        .msu-public .msu-dropzone.msu-dragover {
            border-color: var(--primary-800);
            background: var(--neutrals-200);
        }

        .msu-public .msu-dropzone:focus-within {
            border-color: var(--primary-800);
            box-shadow: var(--msu-focus);
        }

        /* The real input covers the box so click and native drag & drop both reach it. */
        .msu-public .msu-dropzone input[type="file"] {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 2;
            padding: 0;
            border: 0;
        }

    .msu-public .msu-dropzone-icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: var(--msu-radius-sm);
        background: var(--neutrals-200);
        color: var(--msu-navy);
        margin-bottom: 16px;
    }

    .msu-public .msu-dropzone-title {
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0.28px;
        color: var(--msu-ink);
    }

    .msu-public .msu-dropzone-help {
        font-size: 12px;
        font-weight: 300;
        line-height: 20px;
        letter-spacing: 0.24px;
        color: var(--msu-subtle);
        margin-bottom: 24px;
    }

    /* Full-width grey "Upload" bar pinned to the bottom of the box. Visual only (pointer-events: none);
       its hover look is driven by hovering the whole drop zone, because the file input sits on top. */
    .msu-public .msu-dropzone-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: auto;
        padding: 8px 16px;
        border: 1px solid var(--neutrals-200);
        border-radius: var(--msu-radius-sm);
        background: var(--neutrals-200);
        color: var(--msu-ink);
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0.24px;
        pointer-events: none;
        transition: border-color 0.15s ease;
    }


    .msu-public .msu-dropzone.msu-dragover .msu-dropzone-button {
        border-color: var(--primary-800);
    }

    /* ---------- Chosen files (rows built by concern.js) ----------
       Each file is its own white card: preview, name + size, "Remove" on the right.
       Overrides the older grey list styling in site.css. */
    .msu-public .msu-attachments {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

        .msu-public .msu-attachments:not(:empty) {
            margin-top: 16px;
        }

    .msu-public .msu-attachment {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 8px 24px 8px 8px;
        border: 1px solid var(--msu-border);
        border-radius: var(--msu-radius-lg);
        background: var(--neutrals-50);
    }

        .msu-public .msu-attachment + .msu-attachment {
            border-top: 1px solid var(--msu-border);
        }

    .msu-public .msu-attachment-preview {
        flex: 0 0 auto;
        width: 80px;
        height: 80px;
        border: 0;
        border-radius: var(--msu-radius-sm);
        background: var(--neutrals-200);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

        .msu-public .msu-attachment-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .msu-public .msu-attachment-ext {
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0.24px;
        text-transform: uppercase;
        color: var(--msu-subtle);
    }

    .msu-public .msu-attachment-details {
        flex: 1 1 auto;
        min-width: 0;
    }

    .msu-public .msu-attachment-name {
        display: block;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0.28px;
        color: var(--msu-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .msu-public .msu-attachment-size {
        display: block;
        margin-top: 4px;
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
        letter-spacing: 0.28px;
        color: var(--msu-subtle);
    }

    /* "Remove" - red text on a light red tint. The palette has one red, so the tint is mixed from it. */
    .msu-public .msu-attachment-remove {
        flex: 0 0 auto;
        padding: 4px 8px;
        border: 1px solid transparent;
        border-radius: var(--msu-radius-sm);
        background: color-mix(in srgb, var(--functional-red) 15%, var(--neutrals-50));
        color: var(--functional-red);
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: 0.24px;
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

        .msu-public .msu-attachment-remove:hover {
            border-color: var(--functional-red);
        }

        .msu-public .msu-attachment-remove:focus-visible {
            outline: 2px solid var(--functional-red);
            outline-offset: 2px;
        }

    /* reCAPTCHA is a fixed 304px iframe; scale it down on very narrow phones instead of overflowing. */
    .msu-public .msu-recaptcha {
        min-height: 78px;
    }

    /* ---------- Concern number (Status + Confirmation) ---------- */
    .msu-public .msu-number-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 16px 24px 16px;
        border: 1px solid var(--msu-divider);
        border-radius: var(--msu-radius);
        background: var(--neutrals-200);
        text-align: center;
        max-width: 22rem;
        margin: 0 auto;
    }

    .msu-public .msu-number-box-input:focus-within {
        border-color: var(--msu-navy);
        box-shadow: var(--msu-focus);
    }

    .msu-public .msu-number-box-input:has(.input-validation-error) {
        border-color: var(--msu-danger);
    }

    .msu-public .msu-number-caption {
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 15.6px; /* 15.6px */
        color: #67707A;
        margin: 0;
    }

    .msu-public .msu-number-input,
    .msu-public .msu-number-value {
        width: 100%;
        border: 0;
        background: transparent;
        text-align: center;
        color: var(--msu-ink);
        font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.75rem);
        font-weight: 700;
        letter-spacing: 0.01em;
        padding: 4px 0;
        font-variant-numeric: tabular-nums;
    }

        .msu-public .msu-number-input:focus {
            outline: none;
        }

        .msu-public .msu-number-input::placeholder {
            color: var(--msu-border);
            font-weight: 600;
        }

    .msu-public .msu-number-value {
        user-select: all;
        overflow-wrap: anywhere;
    }

/* ---------- Status page (design) ----------
       Scoped to .msu-status-page so the Confirmation page, which shares the number box, is unchanged.
       - grey page background all the way down (header stays white)
       - wider card, 48px above and below the content
       - 504px number box with a dark "-" placeholder */
body.msu-public:has(.msu-status-page) {
    background: var(--msu-band);
}

.msu-public .container.msu-width-lg {
    max-width: 800px;
}

.msu-public .msu-status-page .msu-card-body {
    padding: 48px 24px;
}

.msu-public .msu-status-page .msu-card-intro {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: 0.28px;
    color: var(--msu-text);
    margin-bottom: 16px;
}

.msu-public .msu-status-page .msu-number-box {
    max-width: 504px;
    padding: 24px;
}

.msu-public .msu-status-page .msu-number-input::placeholder {
    color: var(--msu-ink);
    font-weight: 700;
}

/* Status result */
.msu-public .msu-result {
    margin-top: 24px;
    border: 1px solid var(--msu-border);
    border-radius: var(--msu-radius);
    overflow: hidden;
}

.msu-public .msu-result-title {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
    padding: 16px 16px;
    border-bottom: 1px solid var(--msu-divider);
}

.msu-public .msu-result-list {
    margin: 0;
    padding: 8px 16px 8px;
}

.msu-public .msu-result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0;
    font-size: 0.8125rem;
}

    .msu-public .msu-result-row dt {
        font-weight: 400;
        color: var(--msu-muted);
    }

    .msu-public .msu-result-row dd {
        margin: 0;
        font-weight: 600;
        color: var(--msu-ink);
        text-align: right;
        overflow-wrap: anywhere;
    }

.msu-public .msu-status-pill {
    display: inline-block;
    padding: 4px 16px;
    border: 1px solid var(--msu-border);
    border-radius: 999px;
    background: var(--msu-soft);
}

.msu-public .msu-result-message {
    margin: 0;
    padding: 16px 16px 16px;
    font-size: 0.875rem;
}

/* Confirmation */
.msu-public .msu-confirm {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 80px;
}

.msu-public .msu-confirm-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--msu-soft);
    color: var(--msu-navy);
    margin-bottom: 16px;
}

.msu-public .msu-confirm-title {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 700;
    margin: 0 0 16px;
}

.msu-public .msu-confirm-text {
    font-size: 0.875rem;
    color: var(--msu-muted);
    max-width: 28rem;
    margin: 0 auto 16px;
}

/* ---------- Footer ---------- */
.msu-public .msu-footer {
    flex-shrink: 0;
    padding: 24px 0;
    font-size: 0.75rem;
    color: var(--msu-muted);
    text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
    .msu-public .msu-hero {
        padding-top: 56px;
    }

    .msu-public .msu-entry {
        min-height: 260px;
    }
}

@media (max-width: 575.98px) {
    .msu-public .msu-header-inner {
        min-height: 56px;
        gap: 8px;
        padding-inline: 16px;
    }

    .msu-public .msu-header .header__logo svg {
        height: 38px;
    }

    .msu-public .msu-lang-toggle {
        min-width: 0;
        gap: 6px;
        font-size: 0.75rem;
        padding: 4px 16px 4px 16px;
    }

    .msu-public .msu-lang-menu {
        --bs-dropdown-min-width: 13rem;
        --bs-dropdown-item-padding-x: 16px;
    }

    .msu-public {
        --msu-overlap: 64px;
        --msu-hero-to-cards: 32px;
    }

        .msu-public .msu-hero {
            padding-top: 48px;
        }

        .msu-public .msu-hero-short {
            padding-top: 32px;
        }

        .msu-public .msu-overlap {
            padding-bottom: 48px;
        }

        .msu-public .msu-card-body {
            padding: 24px 16px;
        }

        .msu-public .msu-entry {
            min-height: 0;
        }

        .msu-public .msu-entry-title {
            margin-top: 24px;
        }

        .msu-public .msu-field-narrow {
            max-width: none;
        }

        .msu-public .msu-tabs {
            padding: 0 4px;
        }

            .msu-public .msu-tabs .nav-link {
                padding: 16px 8px 16px;
            }

        .msu-public .msu-chip {
            --bs-btn-padding-x: 16px;
        }

        .msu-public .msu-number-box {
            max-width: none;
        }

        .msu-public .msu-status-page .msu-card-body {
            padding: 32px 16px;
        }

        .msu-public .msu-status-page .msu-number-box {
            padding: 16px;
        }

        .msu-public .msu-dropzone {
            min-height: 0;
        }

        .msu-public .msu-attachment {
            gap: 8px;
            padding-right: 8px;
        }

        .msu-public .msu-attachment-preview {
            width: 48px;
            height: 48px;
        }
}

@media (max-width: 359.98px) {
    .msu-public .msu-recaptcha .g-recaptcha {
        transform: scale(0.88);
        transform-origin: 0 0;
    }

    .msu-public .msu-card-footer .msu-btn {
        --bs-btn-padding-x: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msu-public .tab-pane.fade {
        transition: none;
    }
}

.header__logo-img {
    width: 140px;
}