/* Light theme. theme-dark.css redefines every name under html[data-theme="dark"].
   --ma-paper lives here so the section bodies are not stuck on a hardcoded cream. */
:root {
    --ma-bg: #e8e4d8;
    --ma-paper: #f7f3ea;
    --ma-surface: #ffffff;
    --ma-surface-2: #eee9dc;
    --ma-surface-3: #e2dccb;
    --ma-border: #cfd6c2;
    --ma-text: #23291c;
    --ma-text-muted: #5c6650;
    --ma-heading: #2f3a28;
    --ma-link: #0f6e78;
    --ma-accent: #6fae53;
    --ma-accent-ink: #ffffff;
    --ma-danger: #b23b3b;
    --ma-focus: #0f6e78;
    --ma-teal: #0f6e78;
    --ma-column: 1080px;
    /* Status roles. Records and reminders are ranked, not merely coloured, so the rank needs
       names. The tinted fills are deliberately close to the surfaces above: a pale pink or
       cream mixed for a cream page turns into a glowing island once the page goes dark, which
       is what the untokenised health tiles did. */
    --ma-caution: #8a6410;
    --ma-positive: #3f7a34;
    --ma-info: #1d6fa3;
    --ma-danger-wash: #f7e7e7;
    --ma-caution-wash: #f6efdd;
    --ma-positive-wash: #e8f1e4;
    --ma-info-wash: #e4eef5;
    /* Busy wash for AsyncArea. Deliberately translucent — the overlay drifts between the two
       washes so the region reads as working without hiding whatever is already painted under it. */
    --ma-async-wash-1: rgba(247, 243, 234, 0.45);
    --ma-async-wash-2: rgba(226, 220, 203, 0.72);
    --ma-async-spin: #6fae53;
    --ma-async-track: rgba(35, 41, 28, 0.16);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y:hidden;
}

a, .btn-link {
    color: var(--ma-link);
}

.btn-primary {
    float: right;
    background: #5cb85c;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    margin: 0 10px;
    transition: background-color 0.3s
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


.page {
    flex-direction: column !important;
    flex-grow: 1;
}

.nav-item.px-3 {
    display: inline-block !important;
}

/*.nav-scrollable {
    display: inline-block !important;
}
*/
.navbar {
    display: inline-block !important;
}

.nav-link {
    color: #000000;
}







/* ------------------------ */
/* Dialog Component - Start */


.bm-container {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10007;
}

.bm-overlay {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: rgba(0,0,0,0.5);
}

.bm-active {
    display: flex;
}

.blazor-modal {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 88vh;
    width: min(92vw, 720px);
    background-color: var(--ma-surface);
    color: var(--ma-text);
    border-radius: 16px;
    border: 1px solid var(--ma-border);
    /* select, date, and checkbox paint from color-scheme, which inherits, not from
       this background. html[data-theme="dark"] sets color-scheme: dark on the whole
       document, and the modal sits outside the scrollers, so it used to be a light
       body carrying dark widgets. Both declarations stay: light alone would pin light
       widgets on the dark surface, and removing the property puts the widgets back
       on the document scheme. */
    color-scheme: light;
    padding: 0;
    z-index: 1010;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .blazor-modal {
    color-scheme: dark;
}

.bm-header {
    background: linear-gradient(135deg, #2f4a29 0%, #3a5a30 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
}

.bm-title {
    margin-bottom: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    padding: 0;
}

.bm-close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 1.75rem;
    font-weight: 600;
    background-color: #efd5d75e;
}

.bm-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: var(--ma-surface);
    color: var(--ma-text);
    padding: 4px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}


    .bm-content .section,
    .bm-content .section .shadow,
    .bm-content .section .shadow form,
    #PanelContactForm,
    #PanelContactForm .ContactFormControls,
    #PanelContactForm .ContactFormControl .messageRows,
    #PanelContactForm .ContactFormControls .messageRows div,
    #PanelContactForm .ContactFormControls .messageRows div textarea {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }



/* Dialog Component - End */
/* ---------------------- */
.submittedDiv {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    font-weight: bold;
}

    .submittedDiv p {
        position: relative;
        top: 50%;
        text-align: center;
    }

.px-6 {
    display: inline-block;
    border-color: #bbbbec8c;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    background-color: #7f8fff0d;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}



/**/





/**/

.row {
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 2px;
}

/* */



/* Account related */

/* ------------------------ */
/* Accounts Component - Start */



.accountsButton {
    display: flex;
    flex-direction: row;
    background-color: white;
    color: blue;
    border: black solid 1px;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: 600;
    margin-top: 2px;
    margin-right: 3px;
}

.dropdown:hover .accountsButton {
    color: white;
    background-color: #007bff;
}

.accountDropdownContent {
    right: 0;


}

    .accountDropdownContent > a {
        color: blue;
        background-color: white;
    }

    .accountDropdownContent a:hover {
        color: white;
        background-color: #007bff;
    }

.userPhotoDiv {
    margin-left: 10px;
    height: 48px;
}

    .userPhotoDiv > img {
        max-height: 100%;
        height: 48px;
    }




.accountDetailsItemWrapper {
    position: relative;
    border: solid;
    border-width: 1px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    max-width: 100%;
}



.form-group {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.25rem;
}


.form-control {
    width: auto;
}

.contact-message.form-control {
    width: 100%;
}


.form-group > label {
    vertical-align: middle;
    display: inline-block;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    width: 9rem;
}


.account-button {
    margin-left: auto;
    display: block;
}

/* Accounts Component - End */
/* ---------------------- */



.dropdown-content {
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 6px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.success {
    display: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(0 0 0 / 18%);
    z-index: 12;
}

    .success.active {
        display: block;
    }

.successWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-radius: 5px;
}



.errorResponse {
    display: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgb(0 0 0 / 18%);
    z-index: 12;
}

    .errorResponse.active {
        display: block;
    }

.errorResponseWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-radius: 5px;
}



.DialogClose {
    display: none;
    position: absolute;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    background-color: white;
    right: 4px;
    top: 4px;
    border: 1px;
    border-style: solid;
    border-color: red;
    border-radius: 4px;
    line-height: 1.5rem;
    top: 10px;
    right: 15px;
    background: white;
    padding: 6px;
    border-radius: 15px;
    border-width: 2px;
    z-index: 10;


}

    .DialogClose:hover {
        background-color: blue;
        color: #fff;
        border-color: #0a58ca;
    }



    .DialogClose.active {
        display: inline-block;
    }



.checkboxlabel {
    width: 220px !important;
}



#adminUserImage {
    max-width: 224px;
    padding: 0px;
    cursor: pointer;
    width: auto;
    width: 128px;
    height: auto;
}




.adminModal .modal-dialog {
    max-height: 100%;
    height: 100%;
    margin: auto;
    z-index: 5;
    max-width: 100%;
}

.adminModal .modal-content {
    max-height: 100%;
    height: auto;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 100%;
    width: auto;
}

.adminModal .modal-body {
    overflow: auto;
    /*max-width: 1200px;*/
}

.accountDetailsWrapper {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}


.accountDetailsItemWrapper {
    flex-grow: 1;
    max-width: 100%;
    margin: 5px;
    background-color: white;
}

.AccountsBackdrop {
    display: none;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 5;
    background-color: rgba(0,0,0,0.5);
    animation-fill-mode: forwards;
    animation-name: accountBackdropLoad;
    animation-duration: 3s;
    opacity: 0;
}

@keyframes accountBackdropLoad {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.password-form-control {
    width: 154px;
    flex-grow: 1;
}


.AccountsBackdrop-active {
    display: flex;
}



/* */


/* App specific */

.navbar-brand {
    font-weight: 900;
    font-size: 1.5em;
}

.nav-scrollable.flex-column {
    flex-direction: row !important;
}


@media(max-width:600px) {
    .navbar-brand {
        font-weight: 900;
        font-size: 1em;
    }
    .employerTitle {
        
    }
/*    .header-top-row {
        flex-direction: column-reverse;
    }*/
    .nav-section {
        margin-right:0px;
    }


    .nav-scrollable.flex-column {
        flex-direction: column !important;
    }


    .logoDiv {
        margin-right: 0px !important;
    }

    .dropdown-item {
        white-space:wrap;
    }
}



.employer-button {
    background-color: #28a745 !important;
    color: white;
    font-weight: 900;
    font-size: 1.25em;
    border-radius: 15px;
}
    .employer-button:hover {
        background-color: white !important;
        color: #28a745 !important;
    }


.employee-button {
    background-color: #ff9900 !important;
    color: white;
    font-weight: 900;
    font-size: 1.25em;
    border-radius: 15px;
}
    .employee-button:hover {
        background-color: white !important;
        color: #ff9900 !important;
    }


    /* contact us */

.ContactFormControls .col-sm-4 > input {
    width: 100%;
}



/* */


.main-article-default {
}


@media (min-width: 641px) {
    .main-default {
        padding-left: 2rem;
        padding-right: 1.5rem;
    }

    .main-default > article {
        padding-left: 2rem;
        padding-right: 1.5rem;
    }


    .main-admin > article {
        padding: 0px;
        height: 100%;
    }

    .main-admin > article > .content {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
}

.main-admin > article {
    padding: 0px;
}

.main-admin article.content {
    display: flex;
}


.footer-default {
}

.footer-admin {
    display:none;
}

.admin-simple { padding: 1rem 0.25rem 2rem; }
.admin-simple h3 { color: #2f4a29; margin: 0 0 0.8rem; }
.admin-hint { color: #66715c; font-size: 0.9rem; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
.admin-table th, .admin-table td { padding: 0.45rem 0.65rem; border-bottom: 1px solid #e6e9e0; text-align: left; font-size: 0.88rem; }
.admin-table th { color: #66715c; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Compact public-section heroes — title + one-line lead + action, not a billboard. */
.page-hero {
    padding: 0.85rem 1rem 0.9rem !important;
    text-align: left !important;
}
.page-hero .container {
    max-width: 1100px !important;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
}
.page-hero-copy { flex: 1 1 16rem; min-width: 0; }
.page-hero-icon { display: none !important; }
.page-hero h1 {
    font-size: 1.35rem !important;
    font-weight: 800;
    margin: 0 0 0.2rem !important;
    line-height: 1.2;
}
.page-hero-lead,
.page-hero p[class*="-lead"] {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: 46rem !important;
    opacity: 0.92;
}
.page-hero [class*="-btn"] {
    flex: 0 0 auto;
    padding: 0.4rem 0.95rem !important;
    font-size: 0.85rem !important;
}

.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.4rem 1rem 2.6rem;
    color: #3a4234;
    line-height: 1.65;
}
.legal-draft {
    border: 1px dashed #e8873a;
    background: #fff8ef;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.3rem;
    color: #5a5246;
    font-size: 0.92rem;
}
.legal-page h1 { color: #2f4a29; font-size: 1.7rem; margin: 0 0 0.35rem; }
.legal-meta { color: #6b7460; font-size: 0.88rem; margin: 0 0 1.2rem; }
.legal-page h2 { color: #2f4a29; font-size: 1.15rem; margin: 1.4rem 0 0.45rem; }
.legal-page p, .legal-page li { margin: 0 0 0.7rem; }
.legal-page ul { padding-left: 1.2rem; }
.legal-page a, .legal-page button.footer-btn {
    color: #c2621b;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}





/* PRISM attention ring.

   Applied by prismStageModule.js to a host element that Maigenta is drawing attention to. It lives here
   rather than in PrismStage.razor.css because the target is host markup, and Blazor's CSS isolation would
   scope the selector to the PRISM component and never match. */

.prism-attention {
    position: relative;
    outline: 2px solid var(--ma-teal, #0f6e78);
    outline-offset: 3px;
    border-radius: 6px;
    animation: prism-attention-pulse 900ms ease-in-out 2;
}

@keyframes prism-attention-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(15 110 120 / 45%); }
    50% { box-shadow: 0 0 0 8px rgb(15 110 120 / 0%); }
}

@media (prefers-reduced-motion: reduce) {
    .prism-attention {
        animation: none;
    }
}

/* Shared primitives. Scoped CSS cannot be shared across components, so the geometry
   lives here once. A section may re-tint a colour; it must not restate the geometry.
   UA button chrome follows color-scheme and would paint over a token fill, so the
   controls set appearance: none. */

.ma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.4rem 0.95rem;
    background: transparent;
    color: var(--ma-text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.ma-btn-primary {
    background: var(--ma-accent);
    color: var(--ma-accent-ink);
}

.ma-btn-ghost {
    background: var(--ma-surface);
    border-color: var(--ma-border);
    color: var(--ma-text);
}

.ma-btn-ghost:hover:not(:disabled),
.ma-btn-ghost:active:not(:disabled) {
    background: var(--ma-surface-3);
}

/* --ma-danger is a dark red in light and a light pink in dark. accent-ink flips
   with the theme, so the label stays legible on that fill. */
.ma-btn-danger {
    background: var(--ma-danger);
    color: var(--ma-accent-ink);
}

.ma-btn-pill {
    border-radius: 999px;
}

.ma-btn:focus-visible {
    outline: 2px solid var(--ma-focus);
    outline-offset: 2px;
}

.ma-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ma-card {
    display: block;
    box-sizing: border-box;
    background: var(--ma-surface);
    color: var(--ma-text);
    border: 1px solid var(--ma-border);
    border-radius: 14px;
    padding: 1rem;
}

a.ma-card {
    color: var(--ma-text);
    text-decoration: none;
}

a.ma-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

a.ma-card:focus-visible {
    outline: 2px solid var(--ma-focus);
    outline-offset: 2px;
}

.ma-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.25rem;
    border-bottom: 1px solid var(--ma-border);
}

.ma-tab {
    margin: 0 0 -1px;
    padding: 0.45rem 0.75rem;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ma-text-muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.ma-tab:hover:not(:disabled):not(.active):not([aria-selected="true"]) {
    color: var(--ma-text);
}

/* Existing tab sets mark the current one with .active. aria-selected is accepted
   so a tablist does not need a second class. */
.ma-tab.active,
.ma-tab[aria-selected="true"] {
    color: var(--ma-text);
    border-bottom-color: var(--ma-accent);
}

.ma-tab:focus-visible {
    outline: 2px solid var(--ma-focus);
    outline-offset: 2px;
}

.ma-tab:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ma-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ma-pill {
    margin: 0;
    padding: 0.28rem 0.75rem;
    border: 1px solid var(--ma-border);
    border-radius: 999px;
    background: var(--ma-surface);
    color: var(--ma-text-muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.ma-pill:hover:not(:disabled):not(.active):not([aria-selected="true"]) {
    background: var(--ma-surface-3);
    color: var(--ma-text);
}

.ma-pill.active,
.ma-pill[aria-selected="true"] {
    background: var(--ma-accent);
    border-color: var(--ma-accent);
    color: var(--ma-accent-ink);
}

.ma-pill:focus-visible {
    outline: 2px solid var(--ma-focus);
    outline-offset: 2px;
}

.ma-pill:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ma-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ma-field > label {
    background: transparent;
    color: var(--ma-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.ma-input {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--ma-border);
    border-radius: 8px;
    background: var(--ma-surface-2);
    color: var(--ma-text);
    /* 1rem so the label's 0.8rem does not inherit into the control. */
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
}

.ma-input::placeholder {
    color: var(--ma-text-muted);
    opacity: 1;
}

.ma-input:focus-visible {
    outline: 2px solid var(--ma-focus);
    outline-offset: 1px;
    border-color: var(--ma-focus);
}

.ma-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ma-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    color: var(--ma-text);
    cursor: pointer;
}

.ma-check input:focus-visible {
    outline: 2px solid var(--ma-focus);
    outline-offset: 2px;
}

.ma-check input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ===== AsyncArea =====================================================================
   Markup lives in Components/AsyncArea.razor; the rules are global rather than scoped so a
   host page can reach them with ::deep when a region needs a different floor or spinner size.
   The overlay stays mounted and is hidden with opacity, which is what gives it a fade OUT —
   a @if would tear it off the DOM mid-transition. The `>` is load-bearing: nested async
   regions each drive only their own overlay.
   ==================================================================================== */
.ma-async {
    position: relative;
}

.ma-async > .ma-async-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    /* inherit so the wash follows a rounded card instead of squaring off its corners. */
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-image: linear-gradient(100deg,
        var(--ma-async-wash-1) 0%,
        var(--ma-async-wash-2) 45%,
        var(--ma-async-wash-1) 100%);
    background-size: 300% 100%;
    background-position: 0 0;
    /* visibility is delayed by the length of the fade so the region is still painted while it
       fades out, then stops taking hit tests. */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.ma-async.is-loading > .ma-async-overlay {
    opacity: 1;
    visibility: visible;
    /* Swallows clicks on stale content for as long as the fetch is running. */
    pointer-events: auto;
    transition: opacity 0.22s ease, visibility 0s;
    animation: ma-async-shift 1.8s ease-in-out infinite;
}

.ma-async > .ma-async-overlay .ma-async-indicator {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 90%;
}

.ma-async.is-loading > .ma-async-overlay .ma-async-indicator {
    animation: ma-async-rise 0.3s ease-out;
}

.ma-async > .ma-async-overlay .ma-async-spinner {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border: 3px solid var(--ma-async-track);
    border-top-color: var(--ma-async-spin);
    border-radius: 50%;
}

/* Only spins while visible — a hidden overlay that keeps animating is a free compositor tick
   on every async region of the page. */
.ma-async.is-loading > .ma-async-overlay .ma-async-spinner {
    animation: ma-async-spin 0.75s linear infinite;
}

.ma-async > .ma-async-overlay .ma-async-label {
    color: var(--ma-text);
    font-size: 0.92rem;
    font-weight: 600;
    text-shadow: 0 1px 0 var(--ma-async-wash-1);
}

.ma-async-compact > .ma-async-overlay .ma-async-spinner {
    width: 1.35rem;
    height: 1.35rem;
    border-width: 2px;
}

.ma-async-compact > .ma-async-overlay .ma-async-label {
    font-size: 0.82rem;
}

/* Opt-in for hosts that are flex columns — the drawers, the modal body, any shell whose
   scrolling child owns `flex: 1`. Without this the wrapper becomes the flex item and the list
   inside it loses its own stretch-and-scroll. */
.ma-async-flex {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

@keyframes ma-async-shift {
    0% { background-position: 0 0; }
    50% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@keyframes ma-async-spin {
    to { transform: rotate(360deg); }
}

@keyframes ma-async-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* The spinner survives — it is the status, not decoration — but the drifting wash and the
   indicator's entrance do not. */
@media (prefers-reduced-motion: reduce) {
    .ma-async.is-loading > .ma-async-overlay {
        animation: none;
        background-position: 50% 0;
    }

    .ma-async.is-loading > .ma-async-overlay .ma-async-indicator {
        animation: none;
    }

    .ma-async.is-loading > .ma-async-overlay .ma-async-spinner {
        animation-duration: 1.6s;
    }
}