/*
 * mudcompat.css — the base look for the compatibility adapters.
 *
 * This file replaces MudBlazor.min.css (594 KB, render-blocking, and the first thing a phone on a cold
 * visit had to finish downloading before it was allowed to paint). It is a fraction of that size because
 * it covers only the components this platform actually uses, and because everything that can be expressed
 * as a custom property already is: colour, type scale, elevation and shell metrics all arrive from
 * MudThemeProvider, which serialises the same TmaTheme.Value as before.
 *
 * It is deliberately written against the SAME class names the package used. ~400 first-party rules across
 * tokens.css, base.css, shell.css, admin.css, app.css and the scoped .razor.css files extend those names
 * rather than replacing them, and a large part of the test suite asserts through them. Those rules load
 * after this file and continue to win, which is what makes the swap invisible.
 *
 * Ordering note: every rule here is a single class selector (specificity 0,1,0) so that any existing
 * first-party override, however it is written, still takes precedence.
 */

/* ---------- element reset ---------------------------------------------------------------------
 *
 * The package sheet carried an element reset as well as its components, and dropping it put the
 * BROWSER'S default button back under every first-party `<button>` that states only its own colour and
 * layout. MEASURED on staging 2026-09-09: the account menu's two Appearance rows (`button.menu-item`)
 * painted a grey ButtonFace fill with an `outset` border inside a popover whose other rows are flat,
 * because `.tma-menu-pop .menu-item` never had to state a background — MudBlazor.min.css already did.
 *
 * Restated VERBATIM from that sheet rather than reinvented: every button on this platform was authored
 * on top of these exact declarations, so a softer reset would move buttons that are correct today. It is
 * an element selector (0,0,1) stated before every component rule below, which is the same position and
 * the same losing specificity it had in the package — every existing `.mud-*` and first-party class rule
 * still outranks it.
 */

button {
    color: inherit;
    border: 0;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    outline: 0;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- typography ------------------------------------------------------------------------ */

.mud-typography { margin: 0; }

.mud-typography-h1 { font-family: var(--mud-typography-h1-family); font-size: var(--mud-typography-h1-size); font-weight: var(--mud-typography-h1-weight); line-height: var(--mud-typography-h1-lineheight); letter-spacing: var(--mud-typography-h1-letterspacing); text-transform: var(--mud-typography-h1-text-transform); }
.mud-typography-h2 { font-family: var(--mud-typography-h2-family); font-size: var(--mud-typography-h2-size); font-weight: var(--mud-typography-h2-weight); line-height: var(--mud-typography-h2-lineheight); letter-spacing: var(--mud-typography-h2-letterspacing); text-transform: var(--mud-typography-h2-text-transform); }
.mud-typography-h3 { font-family: var(--mud-typography-h3-family); font-size: var(--mud-typography-h3-size); font-weight: var(--mud-typography-h3-weight); line-height: var(--mud-typography-h3-lineheight); letter-spacing: var(--mud-typography-h3-letterspacing); text-transform: var(--mud-typography-h3-text-transform); }
.mud-typography-h4 { font-family: var(--mud-typography-h4-family); font-size: var(--mud-typography-h4-size); font-weight: var(--mud-typography-h4-weight); line-height: var(--mud-typography-h4-lineheight); letter-spacing: var(--mud-typography-h4-letterspacing); text-transform: var(--mud-typography-h4-text-transform); }
.mud-typography-h5 { font-family: var(--mud-typography-h5-family); font-size: var(--mud-typography-h5-size); font-weight: var(--mud-typography-h5-weight); line-height: var(--mud-typography-h5-lineheight); letter-spacing: var(--mud-typography-h5-letterspacing); text-transform: var(--mud-typography-h5-text-transform); }
.mud-typography-h6 { font-family: var(--mud-typography-h6-family); font-size: var(--mud-typography-h6-size); font-weight: var(--mud-typography-h6-weight); line-height: var(--mud-typography-h6-lineheight); letter-spacing: var(--mud-typography-h6-letterspacing); text-transform: var(--mud-typography-h6-text-transform); }
.mud-typography-subtitle1 { font-family: var(--mud-typography-subtitle1-family); font-size: var(--mud-typography-subtitle1-size); font-weight: var(--mud-typography-subtitle1-weight); line-height: var(--mud-typography-subtitle1-lineheight); letter-spacing: var(--mud-typography-subtitle1-letterspacing); text-transform: var(--mud-typography-subtitle1-text-transform); }
.mud-typography-subtitle2 { font-family: var(--mud-typography-subtitle2-family); font-size: var(--mud-typography-subtitle2-size); font-weight: var(--mud-typography-subtitle2-weight); line-height: var(--mud-typography-subtitle2-lineheight); letter-spacing: var(--mud-typography-subtitle2-letterspacing); text-transform: var(--mud-typography-subtitle2-text-transform); }
.mud-typography-body1 { font-family: var(--mud-typography-body1-family); font-size: var(--mud-typography-body1-size); font-weight: var(--mud-typography-body1-weight); line-height: var(--mud-typography-body1-lineheight); letter-spacing: var(--mud-typography-body1-letterspacing); text-transform: var(--mud-typography-body1-text-transform); }
.mud-typography-body2 { font-family: var(--mud-typography-body2-family); font-size: var(--mud-typography-body2-size); font-weight: var(--mud-typography-body2-weight); line-height: var(--mud-typography-body2-lineheight); letter-spacing: var(--mud-typography-body2-letterspacing); text-transform: var(--mud-typography-body2-text-transform); }
.mud-typography-caption { font-family: var(--mud-typography-caption-family); font-size: var(--mud-typography-caption-size); font-weight: var(--mud-typography-caption-weight); line-height: var(--mud-typography-caption-lineheight); letter-spacing: var(--mud-typography-caption-letterspacing); text-transform: var(--mud-typography-caption-text-transform); }
.mud-typography-overline { font-family: var(--mud-typography-overline-family); font-size: var(--mud-typography-overline-size); font-weight: var(--mud-typography-overline-weight); line-height: var(--mud-typography-overline-lineheight); letter-spacing: var(--mud-typography-overline-letterspacing); text-transform: var(--mud-typography-overline-text-transform); }

.mud-typography-gutterbottom { margin-bottom: 0.35em; }
.mud-typography-align-left { text-align: left; }
.mud-typography-align-center { text-align: center; }
.mud-typography-align-right { text-align: right; }
.mud-typography-align-justify { text-align: justify; }
.mud-typography-align-start { text-align: start; }
.mud-typography-align-end { text-align: end; }

/* ---------- palette utility classes ----------------------------------------------------------- */

.mud-primary-text { color: var(--mud-palette-primary); }
.mud-secondary-text { color: var(--mud-palette-secondary); }
.mud-tertiary-text { color: var(--mud-palette-tertiary); }
.mud-info-text { color: var(--mud-palette-info); }
.mud-success-text { color: var(--mud-palette-success); }
.mud-warning-text { color: var(--mud-palette-warning); }
.mud-error-text { color: var(--mud-palette-error); }
.mud-dark-text { color: var(--mud-palette-dark); }
.mud-surface-text { color: var(--mud-palette-text-primary); }
.mud-transparent-text { color: transparent; }

/*
 * MudBadge's own filled-primary look (FilledColorClass) rides this generic utility, so a primary badge
 * carried the same on-accent-text-over-solid-fill shape as the toggle item and the selected chip above,
 * and gets the same accent-pill fix.
 */
.mud-theme-primary { color: var(--accent-on-strong, var(--mud-palette-primary-text)); background-color: var(--accent-strong, var(--mud-palette-primary)); }
.mud-theme-secondary { color: var(--mud-palette-secondary-text); background-color: var(--mud-palette-secondary); }
.mud-theme-tertiary { color: var(--mud-palette-tertiary-text); background-color: var(--mud-palette-tertiary); }
.mud-theme-info { color: var(--mud-palette-info-text); background-color: var(--mud-palette-info); }
.mud-theme-success { color: var(--mud-palette-success-text); background-color: var(--mud-palette-success); }
.mud-theme-warning { color: var(--mud-palette-warning-text); background-color: var(--mud-palette-warning); }
.mud-theme-error { color: var(--mud-palette-error-text); background-color: var(--mud-palette-error); }
.mud-theme-dark { color: var(--mud-palette-dark-text); background-color: var(--mud-palette-dark); }
.mud-theme-surface { color: var(--mud-palette-text-primary); background-color: var(--mud-palette-surface); }

.mud-disabled { opacity: 0.6; pointer-events: none; }
.mud-width-full { width: 100%; }

/* ---------- surfaces and elevation ------------------------------------------------------------ */

.mud-paper { color: var(--mud-palette-text-primary); background-color: var(--mud-palette-surface); border-radius: var(--mud-default-borderradius); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.mud-paper-outlined { border: 1px solid var(--mud-palette-lines-default); box-shadow: none; }
.mud-paper-square { border-radius: 0; }

.mud-elevation-0 { box-shadow: var(--mud-elevation-0); }
.mud-elevation-1 { box-shadow: var(--mud-elevation-1); }
.mud-elevation-2 { box-shadow: var(--mud-elevation-2); }
.mud-elevation-3 { box-shadow: var(--mud-elevation-3); }
.mud-elevation-4 { box-shadow: var(--mud-elevation-4); }
.mud-elevation-5 { box-shadow: var(--mud-elevation-5); }
.mud-elevation-6 { box-shadow: var(--mud-elevation-6); }
.mud-elevation-8 { box-shadow: var(--mud-elevation-8); }
.mud-elevation-10 { box-shadow: var(--mud-elevation-10); }
.mud-elevation-12 { box-shadow: var(--mud-elevation-12); }
.mud-elevation-16 { box-shadow: var(--mud-elevation-16); }
.mud-elevation-24 { box-shadow: var(--mud-elevation-24); }
.mud-elevation-25 { box-shadow: var(--mud-elevation-25); }

/* ---------- buttons --------------------------------------------------------------------------- */

.mud-button-root {
    color: inherit; border: 0; margin: 0; padding: 0; outline: 0; position: relative;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    cursor: pointer; user-select: none; appearance: none; text-decoration: none;
    background-color: transparent; -webkit-tap-highlight-color: transparent;
}

.mud-button-root:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mud-button-root:disabled, .mud-button-root[aria-disabled="true"] { cursor: default; opacity: 0.55; pointer-events: none; }

.mud-button {
    box-sizing: border-box; min-width: 64px; padding: 6px 16px;
    font-family: var(--mud-typography-button-family); font-size: var(--mud-typography-button-size);
    font-weight: var(--mud-typography-button-weight); line-height: var(--mud-typography-button-lineheight);
    letter-spacing: var(--mud-typography-button-letterspacing); text-transform: var(--mud-typography-button-text-transform);
    border-radius: var(--mud-default-borderradius); color: var(--mud-palette-text-primary);
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-button-label { width: 100%; display: inherit; gap: 8px; align-items: inherit; justify-content: inherit; }

.mud-button-text { padding: 6px 8px; }
.mud-button-outlined { padding: 5px 15px; border: 1px solid var(--mud-palette-lines-default); }
.mud-button-filled { box-shadow: var(--mud-elevation-2); background-color: var(--mud-palette-action-default-hover); }

.mud-button-text-primary { color: var(--mud-palette-primary); }
.mud-button-text-secondary { color: var(--mud-palette-secondary); }
.mud-button-text-tertiary { color: var(--mud-palette-tertiary); }
.mud-button-text-info { color: var(--mud-palette-info); }
.mud-button-text-success { color: var(--mud-palette-success); }
.mud-button-text-warning { color: var(--mud-palette-warning); }
.mud-button-text-error { color: var(--mud-palette-error); }
.mud-button-text-dark { color: var(--mud-palette-dark); }

.mud-button-outlined-primary { color: var(--mud-palette-primary); border-color: rgba(var(--mud-palette-primary-rgb), 0.5); }
.mud-button-outlined-secondary { color: var(--mud-palette-secondary); border-color: rgba(var(--mud-palette-secondary-rgb), 0.5); }
.mud-button-outlined-tertiary { color: var(--mud-palette-tertiary); border-color: rgba(var(--mud-palette-tertiary-rgb), 0.5); }
.mud-button-outlined-info { color: var(--mud-palette-info); border-color: rgba(var(--mud-palette-info-rgb), 0.5); }
.mud-button-outlined-success { color: var(--mud-palette-success); border-color: rgba(var(--mud-palette-success-rgb), 0.5); }
.mud-button-outlined-warning { color: var(--mud-palette-warning); border-color: rgba(var(--mud-palette-warning-rgb), 0.5); }
.mud-button-outlined-error { color: var(--mud-palette-error); border-color: rgba(var(--mud-palette-error-rgb), 0.5); }
.mud-button-outlined-dark { color: var(--mud-palette-dark); border-color: rgba(var(--mud-palette-dark-rgb), 0.5); }

.mud-button-filled-primary { color: var(--mud-palette-primary-text); background-color: var(--mud-palette-primary); }
.mud-button-filled-secondary { color: var(--mud-palette-secondary-text); background-color: var(--mud-palette-secondary); }
.mud-button-filled-tertiary { color: var(--mud-palette-tertiary-text); background-color: var(--mud-palette-tertiary); }
.mud-button-filled-info { color: var(--mud-palette-info-text); background-color: var(--mud-palette-info); }
.mud-button-filled-success { color: var(--mud-palette-success-text); background-color: var(--mud-palette-success); }
.mud-button-filled-warning { color: var(--mud-palette-warning-text); background-color: var(--mud-palette-warning); }
.mud-button-filled-error { color: var(--mud-palette-error-text); background-color: var(--mud-palette-error); }
.mud-button-filled-dark { color: var(--mud-palette-dark-text); background-color: var(--mud-palette-dark); }

.mud-button-text-size-small, .mud-button-outlined-size-small, .mud-button-filled-size-small { padding: 4px 10px; font-size: 0.8125rem; }
.mud-button-text-size-large, .mud-button-outlined-size-large, .mud-button-filled-size-large { padding: 8px 22px; font-size: 0.9375rem; }

.mud-button-icon-start { display: inline-flex; margin-inline-end: 2px; }
.mud-button-icon-end { display: inline-flex; margin-inline-start: 2px; }

.mud-icon-button { flex: 0 0 auto; padding: 12px; overflow: visible; text-align: center; border-radius: 50%; color: var(--mud-palette-action-default); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.mud-icon-button-size-small { padding: 5px; }
.mud-icon-button-size-large { padding: 16px; }
.mud-icon-button-edge-start { margin-inline-start: -12px; }
.mud-icon-button-edge-end { margin-inline-end: -12px; }
.mud-icon-button-outlined { border: 1px solid var(--mud-palette-lines-default); }

@media (hover: hover) and (pointer: fine) {
    .mud-button:hover { background-color: var(--mud-palette-action-default-hover); }
    .mud-button-filled:hover { filter: brightness(0.94); }
    .mud-icon-button:hover { background-color: var(--mud-palette-action-default-hover); }
    .mud-link:hover { text-decoration: underline; }
}

/* ---------- icons ----------------------------------------------------------------------------- */

/*
 * An SVG with a viewBox and no width/height would otherwise lay out at the SVG default of 300x150. The
 * host head inlines this same rule ahead of every stylesheet so an icon can never flash at that size
 * while sheets are still in flight; this is the standing copy.
 */
.mud-icon-root { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; fill: currentColor; user-select: none; }
.mud-icon-size-small { font-size: 1.25rem; }
.mud-icon-size-medium { font-size: 1.5rem; }
.mud-icon-size-large { font-size: 2.1875rem; }

/* ---------- grid ------------------------------------------------------------------------------ */

.mud-grid { width: 100%; display: flex; flex-wrap: wrap; box-sizing: border-box; }
.mud-grid-item { margin: 0; box-sizing: border-box; }

.mud-grid-spacing-xs-0 { margin: 0; width: 100%; }
.mud-grid-spacing-xs-1 { margin: -4px 0 0 -4px; width: calc(100% + 4px); }
.mud-grid-spacing-xs-1 > .mud-grid-item { padding: 4px 0 0 4px; }
.mud-grid-spacing-xs-2 { margin: -8px 0 0 -8px; width: calc(100% + 8px); }
.mud-grid-spacing-xs-2 > .mud-grid-item { padding: 8px 0 0 8px; }
.mud-grid-spacing-xs-3 { margin: -12px 0 0 -12px; width: calc(100% + 12px); }
.mud-grid-spacing-xs-3 > .mud-grid-item { padding: 12px 0 0 12px; }
.mud-grid-spacing-xs-4 { margin: -16px 0 0 -16px; width: calc(100% + 16px); }
.mud-grid-spacing-xs-4 > .mud-grid-item { padding: 16px 0 0 16px; }
.mud-grid-spacing-xs-5 { margin: -20px 0 0 -20px; width: calc(100% + 20px); }
.mud-grid-spacing-xs-5 > .mud-grid-item { padding: 20px 0 0 20px; }
.mud-grid-spacing-xs-6 { margin: -24px 0 0 -24px; width: calc(100% + 24px); }
.mud-grid-spacing-xs-6 > .mud-grid-item { padding: 24px 0 0 24px; }
.mud-grid-spacing-xs-8 { margin: -32px 0 0 -32px; width: calc(100% + 32px); }
.mud-grid-spacing-xs-8 > .mud-grid-item { padding: 32px 0 0 32px; }
.mud-grid-spacing-xs-10 { margin: -40px 0 0 -40px; width: calc(100% + 40px); }
.mud-grid-spacing-xs-10 > .mud-grid-item { padding: 40px 0 0 40px; }

.mud-grid-item-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.mud-grid-item-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.mud-grid-item-xs-3 { flex: 0 0 25%; max-width: 25%; }
.mud-grid-item-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.mud-grid-item-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.mud-grid-item-xs-6 { flex: 0 0 50%; max-width: 50%; }
.mud-grid-item-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.mud-grid-item-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.mud-grid-item-xs-9 { flex: 0 0 75%; max-width: 75%; }
.mud-grid-item-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.mud-grid-item-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.mud-grid-item-xs-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 600px) {
    .mud-grid-item-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .mud-grid-item-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .mud-grid-item-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .mud-grid-item-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .mud-grid-item-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .mud-grid-item-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .mud-grid-item-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .mud-grid-item-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .mud-grid-item-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .mud-grid-item-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .mud-grid-item-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .mud-grid-item-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 960px) {
    .mud-grid-item-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .mud-grid-item-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .mud-grid-item-md-3 { flex: 0 0 25%; max-width: 25%; }
    .mud-grid-item-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .mud-grid-item-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .mud-grid-item-md-6 { flex: 0 0 50%; max-width: 50%; }
    .mud-grid-item-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .mud-grid-item-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .mud-grid-item-md-9 { flex: 0 0 75%; max-width: 75%; }
    .mud-grid-item-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .mud-grid-item-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .mud-grid-item-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1280px) {
    .mud-grid-item-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .mud-grid-item-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .mud-grid-item-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .mud-grid-item-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .mud-grid-item-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .mud-grid-item-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .mud-grid-item-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ---------- layout helpers -------------------------------------------------------------------- */

.mud-stack { display: flex; }
.mud-stack-column { flex-direction: column; }
.mud-stack-row { flex-direction: row; align-items: center; }
.mud-stack-reverse.mud-stack-column { flex-direction: column-reverse; }
.mud-stack-reverse.mud-stack-row { flex-direction: row-reverse; }
.mud-stack-wrap { flex-wrap: wrap; }

.mud-spacer { flex-grow: 1; }

.mud-divider { margin: 0; border: none; border-top: 1px solid var(--mud-palette-divider); flex-shrink: 0; }
.mud-divider-vertical { border-top: none; border-left: 1px solid var(--mud-palette-divider); height: auto; align-self: stretch; }
.mud-divider-light { border-color: var(--mud-palette-divider-light); }
.mud-divider-flexitem { align-self: stretch; }

.mud-container { width: 100%; margin-inline: auto; box-sizing: border-box; }
.mud-container-gutters { padding-inline: 16px; }
.mud-container-maxwidth-extrasmall { max-width: 444px; }
.mud-container-maxwidth-small { max-width: 600px; }
.mud-container-maxwidth-medium { max-width: 960px; }
.mud-container-maxwidth-large { max-width: 1280px; }
.mud-container-maxwidth-extralarge { max-width: 1920px; }
.mud-container-maxwidth-false { max-width: none; }

.mud-layout { display: flex; flex-direction: column; min-height: 100%; }
.mud-main-content { display: block; flex: 1 1 auto; }

.mud-appbar { display: flex; width: 100%; box-sizing: border-box; z-index: var(--mud-zindex-appbar); background-color: var(--mud-palette-appbar-background); color: var(--mud-palette-appbar-text); }
.mud-appbar-fixed-top { position: sticky; top: 0; }
.mud-toolbar { display: flex; align-items: center; width: 100%; min-height: var(--mud-appbar-height); padding-inline: 16px; box-sizing: border-box; }

/* ---------- chips ----------------------------------------------------------------------------- */

.mud-chip {
    border: none; outline: 0; margin: 4px; padding: 0 12px; position: relative; max-width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box; white-space: nowrap; vertical-align: middle; text-decoration: none;
    line-height: normal; height: 32px; border-radius: 16px; font-size: 0.8125rem;
    color: var(--mud-palette-text-primary); background-color: var(--mud-palette-action-default-hover);
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-chip-size-small { height: 24px; padding: 0 8px; font-size: 0.75rem; border-radius: 12px; }
.mud-chip-size-large { height: 40px; padding: 0 16px; font-size: 0.875rem; border-radius: 20px; }

.mud-chip-text { background-color: transparent; }
.mud-chip-outlined { background-color: transparent; border: 1px solid var(--mud-palette-lines-default); }

/*
 * A selected chip in a MudChipSet (MudChip.EffectiveColor) renders through this rule by default (the
 * set's SelectedColor is Color.Primary) -- the same on-accent-text-over-solid-fill shape the toggle
 * group's selected item carries above, and the same accent-pill fix for the same reason.
 */
.mud-chip-filled-primary { color: var(--accent-on-strong, var(--mud-palette-primary-text)); background-color: var(--accent-strong, var(--mud-palette-primary)); }
.mud-chip-filled-secondary { color: var(--mud-palette-secondary-text); background-color: var(--mud-palette-secondary); }
.mud-chip-filled-tertiary { color: var(--mud-palette-tertiary-text); background-color: var(--mud-palette-tertiary); }
.mud-chip-filled-info { color: var(--mud-palette-info-text); background-color: var(--mud-palette-info); }
.mud-chip-filled-success { color: var(--mud-palette-success-text); background-color: var(--mud-palette-success); }
.mud-chip-filled-warning { color: var(--mud-palette-warning-text); background-color: var(--mud-palette-warning); }
.mud-chip-filled-error { color: var(--mud-palette-error-text); background-color: var(--mud-palette-error); }
.mud-chip-filled-dark { color: var(--mud-palette-dark-text); background-color: var(--mud-palette-dark); }

.mud-chip-outlined-primary { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.mud-chip-outlined-secondary { color: var(--mud-palette-secondary); border-color: var(--mud-palette-secondary); }
.mud-chip-outlined-tertiary { color: var(--mud-palette-tertiary); border-color: var(--mud-palette-tertiary); }
.mud-chip-outlined-info { color: var(--mud-palette-info); border-color: var(--mud-palette-info); }
.mud-chip-outlined-success { color: var(--mud-palette-success); border-color: var(--mud-palette-success); }
.mud-chip-outlined-warning { color: var(--mud-palette-warning); border-color: var(--mud-palette-warning); }
.mud-chip-outlined-error { color: var(--mud-palette-error); border-color: var(--mud-palette-error); }
.mud-chip-outlined-dark { color: var(--mud-palette-dark); border-color: var(--mud-palette-dark); }

.mud-chip-text-primary { color: var(--mud-palette-primary); background-color: rgba(var(--mud-palette-primary-rgb), 0.1); }
.mud-chip-text-secondary { color: var(--mud-palette-secondary); background-color: rgba(var(--mud-palette-secondary-rgb), 0.1); }
.mud-chip-text-tertiary { color: var(--mud-palette-tertiary); background-color: rgba(var(--mud-palette-tertiary-rgb), 0.1); }
.mud-chip-text-info { color: var(--mud-palette-info); background-color: rgba(var(--mud-palette-info-rgb), 0.1); }
.mud-chip-text-success { color: var(--mud-palette-success); background-color: rgba(var(--mud-palette-success-rgb), 0.1); }
.mud-chip-text-warning { color: var(--mud-palette-warning); background-color: rgba(var(--mud-palette-warning-rgb), 0.1); }
.mud-chip-text-error { color: var(--mud-palette-error); background-color: rgba(var(--mud-palette-error-rgb), 0.1); }
.mud-chip-text-dark { color: var(--mud-palette-dark); background-color: rgba(var(--mud-palette-dark-rgb), 0.1); }

.mud-chipset { display: flex; flex-wrap: wrap; align-items: center; }

/* ---------- alerts ---------------------------------------------------------------------------- */

.mud-alert { display: flex; padding: 6px 16px; border-radius: var(--mud-default-borderradius); background-color: transparent; }
.mud-alert-icon { display: flex; opacity: 0.9; padding: 7px 0; font-size: 22px; margin-inline-end: 12px; }
.mud-alert-message { padding: 9px 0; flex: 1 1 auto; }
.mud-alert-close { display: flex; align-items: center; margin-inline-start: 8px; }
.mud-alert-dense { padding: 0 12px; }
.mud-alert-dense .mud-alert-message { padding: 4px 0; }
.mud-alert-dense .mud-alert-icon { padding: 4px 0; }
.mud-alert-square { border-radius: 0; }

.mud-alert-text-normal { color: var(--mud-palette-text-primary); background-color: var(--mud-palette-background-gray); }
.mud-alert-text-info { color: var(--mud-palette-info-darken); background-color: var(--mud-palette-info-hover); }
.mud-alert-text-success { color: var(--mud-palette-success-darken); background-color: var(--mud-palette-success-hover); }
.mud-alert-text-warning { color: var(--mud-palette-warning-darken); background-color: var(--mud-palette-warning-hover); }
.mud-alert-text-error { color: var(--mud-palette-error-darken); background-color: var(--mud-palette-error-hover); }

.mud-alert-outlined-normal { color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default); }
.mud-alert-outlined-info { color: var(--mud-palette-info-darken); border: 1px solid rgba(var(--mud-palette-info-rgb), var(--mud-palette-border-opacity)); }
.mud-alert-outlined-success { color: var(--mud-palette-success-darken); border: 1px solid rgba(var(--mud-palette-success-rgb), var(--mud-palette-border-opacity)); }
.mud-alert-outlined-warning { color: var(--mud-palette-warning-darken); border: 1px solid rgba(var(--mud-palette-warning-rgb), var(--mud-palette-border-opacity)); }
.mud-alert-outlined-error { color: var(--mud-palette-error-darken); border: 1px solid rgba(var(--mud-palette-error-rgb), var(--mud-palette-border-opacity)); }

.mud-alert-filled-normal { color: var(--mud-palette-text-primary); font-weight: 500; background-color: var(--mud-palette-background-gray); }
.mud-alert-filled-info { color: var(--mud-palette-info-text); font-weight: 500; background-color: var(--mud-palette-info); }
.mud-alert-filled-success { color: var(--mud-palette-success-text); font-weight: 500; background-color: var(--mud-palette-success); }
.mud-alert-filled-warning { color: var(--mud-palette-warning-text); font-weight: 500; background-color: var(--mud-palette-warning); }
.mud-alert-filled-error { color: var(--mud-palette-error-text); font-weight: 500; background-color: var(--mud-palette-error); }

/* ---------- placeholders and progress --------------------------------------------------------- */

.mud-skeleton { display: block; height: 1.2em; background-color: var(--mud-palette-skeleton); border-radius: 4px; }
.mud-skeleton-text { margin-block: 0.2em; transform: scale(1, 0.7); }
.mud-skeleton-circle { border-radius: 50%; }
.mud-skeleton-rectangle { border-radius: var(--mud-default-borderradius); }

.mud-skeleton-wave { position: relative; overflow: hidden; }
.mud-skeleton-wave::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(var(--mud-palette-surface-rgb), 0.45), transparent);
    animation: mud-skeleton-wave 1.6s linear 0.5s infinite;
}

@keyframes mud-skeleton-wave { 100% { transform: translateX(100%); } }

.mud-progress-linear { position: relative; display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 0; background-color: var(--mud-palette-action-default-hover); }
.mud-progress-linear-medium { height: 8px; }
.mud-progress-linear-large { height: 12px; }
.mud-progress-linear-rounded { border-radius: 999px; }
.mud-progress-linear-rounded .mud-progress-linear-bar { border-radius: 999px; }
.mud-progress-linear-bar { height: 100%; background-color: currentColor; transition: width 200ms linear; }
.mud-progress-linear-color-primary { color: var(--mud-palette-primary); }
.mud-progress-linear-color-secondary { color: var(--mud-palette-secondary); }
.mud-progress-linear-color-info { color: var(--mud-palette-info); }
.mud-progress-linear-color-success { color: var(--mud-palette-success); }
.mud-progress-linear-color-warning { color: var(--mud-palette-warning); }
.mud-progress-linear-color-error { color: var(--mud-palette-error); }
.mud-progress-linear-indeterminate .mud-progress-linear-bar { width: 40%; animation: mud-progress-linear-indeterminate 1.6s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }

@keyframes mud-progress-linear-indeterminate { 0% { margin-inline-start: -40%; } 100% { margin-inline-start: 100%; } }

.mud-progress-circular { display: inline-block; width: 2.5rem; height: 2.5rem; color: var(--mud-palette-primary); }
.mud-progress-small { width: 1.5rem; height: 1.5rem; }
.mud-progress-large { width: 4rem; height: 4rem; }
.mud-progress-circular-circle { width: 100%; height: 100%; stroke: currentColor; }
.mud-progress-indeterminate .mud-progress-circular-circle { animation: mud-progress-circular-spin 1.4s linear infinite; transform-origin: 50% 50%; }

@keyframes mud-progress-circular-spin { 100% { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .mud-skeleton-wave::after,
    .mud-progress-linear-indeterminate .mud-progress-linear-bar,
    .mud-progress-indeterminate .mud-progress-circular-circle { animation: none; }
}

/* ---------- form controls --------------------------------------------------------------------- */

.mud-input-control { border: 0; margin: 0; padding: 0; display: flex; flex: 1 1 auto; max-width: 100%; position: relative; flex-direction: column; vertical-align: top; }
.mud-input-control-margin-dense { margin-top: 4px; margin-bottom: 4px; }
.mud-input-control-margin-normal { margin-top: 8px; margin-bottom: 8px; }
.mud-input-control-input-container { position: relative; display: flex; flex-direction: column; }

.mud-input { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; cursor: text; line-height: 1.1876em; color: var(--mud-palette-text-primary); color-scheme: var(--mud-native-html-color-scheme); }

.mud-input-slot {
    width: 100%; border: 0; margin: 0; padding: 8px 0; outline: 0; display: block; min-width: 0;
    background: none; box-sizing: content-box; font: inherit; color: currentColor;
    -webkit-tap-highlight-color: transparent;
}

.mud-input-slot::placeholder { color: var(--mud-palette-text-secondary); opacity: 1; }

/*
 * ONE FIELD DRAWS ONE BOX. The reset above is a single class (0,1,0) and the host's critical CSS states a
 * plain-form box on element selectors -- input[type="text"], ..., select, textarea { border; background;
 * min-height; radius } -- which is (0,1,1) and out-ranks it. MEASURED in headless Chrome on the served
 * /app/locations at 375px: the search field's own <input> painted a 1px border, a white fill, an 8px radius
 * and a 44px floor INSIDE the outlined box its wrapper already draws, so one field read as two, the outer
 * one holding the magnifier (owner report, 2026-09-09).
 *
 * Restated one specificity step up rather than fixed in that sheet: the critical CSS is right about a bare
 * control on a page that renders one, and a control THIS layer renders owns its own look end to end. Two
 * classes beat one element plus one attribute, and it is stated once instead of per input type.
 *
 * min-height is zeroed here because a 44px floor inflates a field that has already sized itself from its
 * own padding; the select genuinely needs the tap target and restates it below at the same specificity.
 */
.mud-input .mud-input-slot { border: 0; background: none; border-radius: 0; min-height: 0; }

/*
 * ...AND IN EVERY STATE, which the reset above does NOT cover on its own. MEASURED on the live sign-up
 * page (375px, both themes, 2026-09-10): the focused inner input computed `border: 0` -- the reset winning
 * -- and `outline: 2px solid rgb(31,110,156)`, from the shell's blanket accessibility rule in base.css
 * (`a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, ...`). A square
 * outline drawn INSIDE the wrapper's rounded box is the box-within-a-box the owner reported, and it is
 * exactly the same mechanism as the 2026-09-09 report one state along: a rule stated for a bare control
 * reaching a control this layer already draws a box around.
 *
 * The state-qualified selectors are one class-weight step above the unqualified reset -- (0,3,0) against
 * base.css's (0,1,1) and the critical CSS's (0,1,1) -- so this wins on SPECIFICITY, never on order and
 * never with !important. Order matters here: App.razor preloads mudcompat.css FIRST, before base.css, so
 * an equal-specificity rule in the shim loses every tie. It is stated once for every state rather than
 * per state, because "which states may draw a box" has exactly one answer: none of them.
 *
 * Two properties are deliberately absent, and both would regress something real:
 *   * min-height -- the select restates its 44px tap target at (0,2,0), which a (0,3,0) `min-height: 0`
 *     would out-rank in every state a pointer or keyboard can reach.
 *   * the `background` SHORTHAND -- the select's chevron is a background-image, and a shorthand would
 *     strip it on hover, focus and disabled. Only the fill is reset.
 */
.mud-input .mud-input-slot,
.mud-input .mud-input-slot:hover,
.mud-input .mud-input-slot:focus,
.mud-input .mud-input-slot:focus-visible,
.mud-input .mud-input-slot:focus-within,
.mud-input .mud-input-slot:active,
.mud-input .mud-input-slot:invalid,
.mud-input .mud-input-slot:required,
.mud-input .mud-input-slot:optional,
.mud-input .mud-input-slot:disabled,
.mud-input .mud-input-slot:read-only,
.mud-input .mud-input-slot:placeholder-shown {
    outline: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}

/*
 * AUTOFILL is the one state whose box no author `background-color` can remove: the browser paints the
 * filled field from its own internal style, at a weight author CSS does not outrank. Inside a wrapper that
 * insets its control by 14px, that fill lands as a pale rectangle with a visible margin all round -- a box
 * inside the box, on the two fields most likely to be autofilled anywhere on the platform (sign-in email
 * and password).
 *
 * Clipping the background to the TEXT is the way out that still draws nothing: the forced fill survives
 * only where a glyph is, and -webkit-text-fill-color paints the glyphs over it, so the field reads exactly
 * as it does at rest. No !important, because background-clip is not the property the browser forces.
 *
 * Stated in its own rule rather than appended to the list above on purpose: an unrecognised pseudo-class
 * invalidates the WHOLE selector list it appears in, so a browser without :-webkit-autofill would have
 * dropped the entire state reset with it.
 */
.mud-input input.mud-input-slot:-webkit-autofill,
.mud-input textarea.mud-input-slot:-webkit-autofill {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--ink-1, var(--mud-palette-text-primary));
}
.mud-input input.mud-input-slot:autofill,
.mud-input textarea.mud-input-slot:autofill {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--ink-1, var(--mud-palette-text-primary));
}
/*
 * The select needs the same neutralisation and cannot take the same declaration: one clip value would clip
 * its chevron away too. background-clip is a per-layer list whose LAST value clips the background colour,
 * so the image layer keeps border-box and only the forced fill is clipped to text.
 */
.mud-input select.mud-input-slot:-webkit-autofill {
    background-clip: border-box, text;
    -webkit-background-clip: border-box, text;
    -webkit-text-fill-color: var(--ink-1, var(--mud-palette-text-primary));
}
.mud-input select.mud-input-slot:autofill {
    background-clip: border-box, text;
    -webkit-background-clip: border-box, text;
    -webkit-text-fill-color: var(--ink-1, var(--mud-palette-text-primary));
}

.mud-input-slot:disabled { color: var(--mud-palette-text-disabled); cursor: default; }

/*
 * The band a labelled field reserves above its box for its floated label, and the reason a labelled field
 * never shows a placeholder at the same time as a label sitting INSIDE the box -- two runs of grey text in
 * the same place, which is what read as two overlapping fields. The placeholder is not dropped: it appears
 * the instant the field takes focus, which is the instant the label leaves the box.
 */
.mud-input-with-label { margin-top: 16px; }
.mud-input-with-label .mud-input-slot:not(:focus)::placeholder { color: transparent; }

/*
 * The outlined field's border is a sibling element rather than a border on the input, so the floating
 * label can sit on top of it without the box shifting. Underneath the label, the border simply keeps its
 * own colour; the label paints its own background over it.
 */
.mud-input-outlined { padding: 0 14px; border-radius: var(--radius-sm, var(--mud-default-borderradius)); background-color: var(--surface, transparent); }
.mud-input-outlined .mud-input-slot { padding: 16.5px 0; }
.mud-input-outlined-border { position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--hairline-strong, var(--mud-palette-lines-inputs)); border-radius: inherit; transition: border-color var(--dur-fast, 140ms) var(--ease, ease), box-shadow var(--dur-fast, 140ms) var(--ease, ease); }
/* A ring rather than a thicker border: the platform's focus affordance everywhere else, and it cannot
   shift the text inside the box the way a 1px-to-2px border can. */
.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--accent-fg, var(--mud-palette-primary)); box-shadow: 0 0 0 3px var(--accent-soft, transparent); }
.mud-input-outlined.mud-input-error .mud-input-outlined-border { border-color: var(--error, var(--mud-palette-error)); }

.mud-input-text, .mud-input-filled { border-bottom: 1px solid var(--hairline-strong, var(--mud-palette-lines-inputs)); }
/*
 * The underline variants' focus indicator. The outlined field answers focus with an accent border plus a
 * soft halo -- the design system's own field ring, which TmaField has always drawn instead of the browser
 * outline. An underline field has a single edge to say it with, so it says it by DOUBLING that edge: the
 * inset shadow lays a second accent pixel over the first without moving the text inside the field, which a
 * 1px-to-2px border would. Stated because the inner control's outline is now suppressed in every state --
 * a colour change on one hairline is a thin thing to leave a keyboard user with on its own.
 */
.mud-input-text:focus-within, .mud-input-filled:focus-within {
    border-bottom-color: var(--accent-fg, var(--mud-palette-primary));
    box-shadow: inset 0 -1px 0 0 var(--accent-fg, var(--mud-palette-primary));
}
.mud-input-text.mud-input-error, .mud-input-filled.mud-input-error { border-bottom-color: var(--error, var(--mud-palette-error)); }
.mud-input-filled { padding: 0 12px; border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0; background-color: var(--mud-palette-action-default-hover); }

/*
 * THE FLOATING LABEL. Owner report, demo host on a phone, 2026-09-09: labels printed on top of their own
 * field's text, on top of a search box's magnifier, and every one of them carrying a highlighted background.
 *
 * One geometry for every variant, and it is ANCHORED rather than typed. A labelled field reserves a 16px
 * band above its box (.mud-input-with-label, in the block above); the label is positioned from the top of
 * that band to the BOTTOM of the control and centred inside it, so while it sits in the field it lands on
 * the input's own text line whatever the variant's padding, the density or the font size. Floating it is
 * then one move -- collapse the box into the band. The per-variant translate() constants this replaces
 * (translate(0, 2px) for text, translate(14px, -7px) for outlined) were tuned against a control that had no
 * reserved band at all, which is why a shrunk label landed on the first line of its own input and a whole
 * form read as a stack of overlapping boxes.
 *
 * It paints NO background. The outlined label used to carry --mud-palette-surface so it could sit on top of
 * the border: that IS the highlight, and it was wrong wherever the field was not on that exact colour -- a
 * drawer, a card, a table row. Floating ABOVE the box rather than onto its border removes the reason to
 * paint anything at all.
 */
.mud-input-label { color: var(--mud-palette-text-secondary); font-size: 1rem; line-height: 1; transform-origin: top left; pointer-events: none; }
.mud-input-label-inputcontrol { position: absolute; inset-inline-start: 0; top: 16px; bottom: 0; display: flex; align-items: center; }
.mud-input-label-animated { transition: top 200ms cubic-bezier(0.0, 0, 0.2, 1), transform 200ms cubic-bezier(0.0, 0, 0.2, 1), color 200ms cubic-bezier(0.0, 0, 0.2, 1); }
/* The float: once for a field that has a value, once for a field that has focus. */
.mud-input-label-shrink { top: 0; bottom: auto; transform: scale(0.75); }
.mud-input-control:focus-within .mud-input-label-inputcontrol { top: 0; bottom: auto; transform: scale(0.75); color: var(--mud-palette-primary); }
/* The outlined box insets its own text by 14px; its label lines up with that text in both states. */
.mud-input-label-outlined { padding-inline-start: 14px; }
/*
 * A start adornment -- /app/locations' "Search locations" magnifier -- occupies the field's leading edge,
 * and the label is anchored to that same edge, so without an allowance the label prints straight over the
 * icon and one field reads as two. Sized from the adornment itself: a Size.Small icon is 20px and
 * .mud-input-adornment-start adds an 8px gap, plus the outlined box's own 14px inset where it applies.
 * Keyed on the CONTROL rather than the input wrapper because the label is the wrapper's SIBLING, not its
 * descendant -- a rule written the other way round matches nothing and fails silently.
 */
.mud-input-control-start-adornment .mud-input-label-inputcontrol { padding-inline-start: 28px; }
.mud-input-control-start-adornment .mud-input-label-outlined { padding-inline-start: 42px; }
.mud-input-label.mud-input-error { color: var(--mud-palette-error); }
.mud-input-required-marker { margin-inline-start: 2px; color: var(--mud-palette-error); }
/* A label that is announced but not drawn -- the platform's own .visually-hidden recipe from base.css,
   restated because the standalone business host loads this sheet without it. Clipped, never display:none:
   a display:none label is not announced either, which would defeat the point of keeping it. */
.mud-input-label-sronly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.mud-input-helper-text { margin: 3px 0 0; font-size: 0.75rem; font-weight: 400; line-height: 1.66; letter-spacing: 0.03333em; text-align: start; color: var(--mud-palette-text-secondary); }
.mud-input-helper-text.mud-input-error { color: var(--mud-palette-error); }

.mud-input-adornment { display: inline-flex; align-items: center; color: var(--mud-palette-action-default); }
.mud-input-adornment-start { margin-inline-end: 8px; }
.mud-input-adornment-end { margin-inline-start: 8px; }
.mud-input-clear-button { margin-inline-start: 4px; }

/*
 * The select is a native control: the browser draws the option list, so nothing here positions or paints
 * one. What the closed state has to do is read as the platform's OWN control rather than as browser
 * chrome, which is the same contract TmaSelect states for the kit — one themed chevron, the platform
 * radius and hairline, a 44px touch target and a focus ring rather than a border that thickens.
 *
 * Every token is read WITH a fallback. The standalone business host loads this sheet without tokens.css,
 * where a bare var() computes to nothing and would strip the control's chevron and border entirely; the
 * fallback is MudBlazor's own value, so that host keeps exactly the look it has today.
 */
.mud-select-input {
    appearance: none; cursor: pointer; box-sizing: border-box;
    padding-inline-end: 40px;
}
/*
 * The tap target AND the chevron, both restated at the specificity of the slot reset above -- which zeroes
 * min-height and clears the background for every other input, and would otherwise take this one with it.
 *
 * The chevron was on the single-class rule and was therefore already LOST: `.mud-input .mud-input-slot`
 * is (0,2,0) and its `background: none` shorthand out-ranks a (0,1,0) `background-image`, whatever the
 * source order. Since `appearance: none` had already removed the browser's own arrow, the select rendered
 * with no affordance at all and read as a plain text box -- found by resolving the served cascade rather
 * than by reading either rule, because both are individually correct.
 */
.mud-input .mud-select-input {
    min-height: var(--touch, 44px);
    background-image: var(--select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343566A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}
.mud-select-input:disabled { cursor: default; opacity: 0.6; }
.mud-select-dense .mud-input-slot { padding-block: 6px; }
.mud-select-dense .mud-select-input { min-height: 36px; }

/* The chevron is a background image, so it does not mirror itself; RTL moves it to the other end. Keyed
   through .mud-input for the same reason the rule above is: below that weight it never lands. */
[dir="rtl"] .mud-input .mud-select-input { background-position: left 12px center; }

.mud-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; vertical-align: middle; }
.mud-switch-base { position: relative; display: inline-flex; align-items: center; width: 38px; height: 20px; flex: 0 0 auto; }
.mud-switch-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.mud-switch-track { position: absolute; inset: 0; border-radius: 999px; background-color: var(--mud-palette-action-disabled); transition: background-color 150ms ease; }
.mud-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--mud-palette-surface); box-shadow: var(--mud-elevation-1); transition: transform 150ms ease; }
.mud-switch-checked .mud-switch-thumb { transform: translateX(18px); }
.mud-switch-checked .mud-switch-track { background-color: var(--mud-palette-action-default); }
.mud-switch-checked.mud-switch-primary .mud-switch-track { background-color: var(--mud-palette-primary); }
.mud-switch-checked.mud-switch-secondary .mud-switch-track { background-color: var(--mud-palette-secondary); }
.mud-switch-checked.mud-switch-success .mud-switch-track { background-color: var(--mud-palette-success); }
.mud-switch-checked.mud-switch-warning .mud-switch-track { background-color: var(--mud-palette-warning); }
.mud-switch-checked.mud-switch-error .mud-switch-track { background-color: var(--mud-palette-error); }
.mud-switch-checked.mud-switch-info .mud-switch-track { background-color: var(--mud-palette-info); }
.mud-switch-input:focus-visible + .mud-switch-track { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mud-switch-label-start { flex-direction: row-reverse; }

/*
 * A tick box and its text. The box aligns to the FIRST LINE, not to the middle of a wrapped sentence: once
 * the consent line on /signup runs to three lines at 375px, a vertically centred tick reads as belonging to
 * the middle of the paragraph rather than to the whole of it. The content element beside it (below) is what
 * keeps the sentence a sentence -- see MudCheckBox.
 */
.mud-checkbox, .mud-radio, .mud-toggle-item { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; vertical-align: middle; }
/* A tick box only. A toggle group's segment is a one-line button and stays centred on its own row. */
.mud-checkbox, .mud-radio { align-items: flex-start; }
.mud-checkbox-input, .mud-radio-input, .mud-toggle-item-input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--mud-palette-primary); cursor: inherit; }
/* Half the difference between the first line's box and the tick's own, so the tick sits ON that line at any
   font size instead of at an offset typed for one of them. Collapses to zero on a line shorter than 18px. */
.mud-checkbox-input, .mud-radio-input { margin-block-start: calc((1.5em - 18px) / 2); }
/* The one flex item the caller's content lives in. display:block, so the spans and links inside it are
   ordinary inline content again and wrap the way text does; min-width:0 so a long run can actually wrap
   rather than forcing the row wider than its column. */
.mud-checkbox-content, .mud-radio-label { display: block; min-width: 0; }
.mud-checkbox-primary .mud-checkbox-input, .mud-radio-primary .mud-radio-input { accent-color: var(--mud-palette-primary); }
.mud-checkbox-secondary .mud-checkbox-input { accent-color: var(--mud-palette-secondary); }
.mud-checkbox-success .mud-checkbox-input { accent-color: var(--mud-palette-success); }
.mud-checkbox-error .mud-checkbox-input { accent-color: var(--mud-palette-error); }
.mud-checkbox-box, .mud-radio-button { display: none; }
.mud-checkbox-dense { gap: 4px; }
.mud-radio-group { display: inline-flex; flex-direction: column; gap: 4px; }

/*
 * The segmented control. The radio input itself is visually removed but stays in the accessibility tree
 * and keeps focus, which is what makes arrow-key selection work; the label carries the visible segment.
 */
.mud-toggle-group { display: inline-flex; align-items: stretch; border-radius: var(--mud-default-borderradius); overflow: hidden; }
.mud-toggle-group-outlined { border: 1px solid var(--mud-palette-lines-default); }
.mud-toggle-item { position: relative; padding: 6px 14px; gap: 6px; justify-content: center; font-size: 0.875rem; color: var(--mud-palette-text-primary); background-color: transparent; transition: background-color 150ms ease, color 150ms ease; }
.mud-toggle-group-dense .mud-toggle-item { padding: 3px 10px; }
.mud-toggle-item + .mud-toggle-item { border-inline-start: 1px solid var(--mud-palette-lines-default); }
.mud-toggle-item-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mud-toggle-item-content { display: inline-flex; align-items: center; gap: 6px; }
/*
 * MEASURED on production (2026-09-10, /signup?sourcePath=for-restaurants, 375px): the selected billing-
 * interval segment painted white text (its on-accent ink, correct for a SOLID fill) over a background
 * that resolved to only a 16% tint of the accent -- 1.97:1, illegible. The rule below no longer trusts
 * `--mud-palette-primary` alone to stay solid: it reads the design system's own accent "pill" first
 * (`--accent-strong`/`--accent-on-strong`, tokens.css) -- deliberately the SAME value in both themes, and
 * already the featured plan-card CTA's fill on this exact page -- falling back to the old pair unchanged
 * for a host that never loads tokens.css.
 */
.mud-toggle-item-selected { color: var(--accent-on-strong, var(--mud-palette-primary-text)); background-color: var(--accent-strong, var(--mud-palette-primary)); }
.mud-toggle-group-secondary .mud-toggle-item-selected { background-color: var(--mud-palette-secondary); color: var(--mud-palette-secondary-text); }
.mud-toggle-item-input:focus-visible + .mud-toggle-item-content { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.mud-slider { display: flex; flex-direction: column; gap: 4px; }
.mud-slider-input { width: 100%; accent-color: var(--mud-palette-primary); }
.mud-slider-primary .mud-slider-input { accent-color: var(--mud-palette-primary); }

/*
 * The date and time fields are native inputs. Chromium paints its own calendar/clock glyph inside them,
 * which is the one piece of browser chrome left in the form vocabulary; tinting it with currentColor puts
 * it on the platform's ink in both themes instead of leaving a black glyph on a dark field.
 */
.mud-picker-input { cursor: pointer; box-sizing: border-box; min-height: var(--touch, 44px); }
.mud-picker-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; filter: var(--mud-picker-indicator-filter, none); }
.mud-picker-input:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.mud-autocomplete-input { width: 100%; }

/*
 * The typeahead's suggestion list. An inline sibling of the input rather than an overlay, so it needs a
 * containing block on the field and a stacking order over whatever follows it in the form - but no script
 * to place it, and no shared outlet to contend over.
 */
.mud-autocomplete { position: relative; }
.mud-autocomplete-suggestions {
    /* The same layer the menu panel uses. At a low z-index the list paints UNDER the app bar and the
       drawer, which on an operator page is a suggestion list the operator cannot see. */
    position: absolute; inset-inline: 0; top: 100%; z-index: var(--mud-zindex-popover, 1200);
    margin-top: 4px; max-height: 280px; overflow-y: auto;
    display: flex; flex-direction: column;
    border: 1px solid var(--hairline-strong, var(--mud-palette-lines-default));
    border-radius: var(--radius-sm, var(--mud-default-borderradius));
    background: var(--surface, var(--mud-palette-surface));
    box-shadow: var(--mud-elevation-8);
}
.mud-autocomplete-suggestion {
    appearance: none; border: 0; background: none; font: inherit; text-align: start; cursor: pointer;
    min-height: var(--touch, 44px);
    padding: 8px var(--sp-4, 16px);
    color: var(--ink-1, var(--mud-palette-text-primary));
}
.mud-autocomplete-suggestion:hover,
.mud-autocomplete-suggestion:focus-visible,
.mud-autocomplete-suggestion.mud-selected { background: var(--accent-soft, var(--mud-palette-action-default-hover)); }
.mud-autocomplete-no-items { padding: 8px var(--sp-4, 16px); color: var(--ink-2, var(--mud-palette-text-secondary)); }
.mud-form { display: block; }

/* ---------- tables ---------------------------------------------------------------------------- */

.mud-table { color: var(--mud-palette-text-primary); background-color: var(--mud-palette-surface); border-radius: var(--mud-default-borderradius); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.mud-table-container { width: 100%; overflow-x: auto; }
.mud-table-root { width: 100%; border-collapse: collapse; border-spacing: 0; }
.mud-table-cell { display: table-cell; padding: 16px; text-align: start; vertical-align: inherit; border-bottom: 1px solid var(--mud-palette-table-lines); }
.mud-table-head-cell { font-weight: 500; line-height: 1.5rem; color: var(--mud-palette-text-primary); }
.mud-table-dense .mud-table-cell { padding: 6px 16px; }
.mud-table-bordered .mud-table-cell { border: 1px solid var(--mud-palette-table-lines); }
.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) { background-color: var(--mud-palette-table-striped); }
.mud-table-row-clickable { cursor: pointer; }
.mud-table-sticky-header .mud-table-head { position: sticky; top: 0; z-index: 1; background-color: var(--mud-palette-surface); }
.mud-table-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
.mud-table-pagination { display: flex; justify-content: flex-end; padding: 8px 16px; }
.mud-table-pagination-toolbar { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--mud-palette-text-secondary); }
.mud-table-sort-label { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.mud-table-sort-label-icon { opacity: 0; transition: opacity 150ms ease; }
.mud-direction-ascending .mud-table-sort-label-icon, .mud-direction-descending .mud-table-sort-label-icon { opacity: 1; }

/*
 * A sortable header carries a marker only once it is the column being sorted, so the header row does not
 * read as a row of arrows. The grid's own headers say so through aria-sort, which is also the hook here -
 * one source for what the screen reader is told and what the eye is shown.
 */
.mud-table-head-cell .mud-table-sort-label { width: 100%; justify-content: space-between; }
.mud-table-head-cell[aria-sort] .mud-table-sort-label-icon { opacity: 1; }
.mud-table-head-cell .mud-table-sort-label:hover .mud-table-sort-label-icon,
.mud-table-head-cell .mud-table-sort-label:focus-visible .mud-table-sort-label-icon { opacity: 0.5; }

/* The per-column filter. A search input rather than a text one, so a phone offers the clear affordance. */
.mud-table-filter-input {
    display: block; box-sizing: border-box; width: 100%; margin-top: 6px;
    padding: 4px 8px; font: inherit; font-size: 0.8125rem; font-weight: 400;
    color: var(--ink-1, var(--mud-palette-text-primary));
    background: var(--surface, var(--mud-palette-surface));
    border: 1px solid var(--hairline-strong, var(--mud-palette-lines-inputs));
    border-radius: var(--radius-sm, var(--mud-default-borderradius));
}
.mud-table-filter-input:focus { outline: none; border-color: var(--accent-fg, var(--mud-palette-primary)); box-shadow: 0 0 0 3px var(--accent-soft, transparent); }

/*
 * The pager. It wraps rather than overflows, because at 375px the rows-per-page control, the range and the
 * two buttons do not fit on one line and a toolbar that scrolls sideways is a toolbar an operator loses.
 */
.mud-table-pagination-toolbar { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.mud-table-pagination-rows { display: inline-flex; align-items: center; gap: 8px; }
.mud-table-pagination-select {
    box-sizing: border-box; min-height: 36px; padding-block: 4px; padding-inline: 8px 32px;
    font: inherit; font-size: 0.875rem;
    color: var(--ink-1, var(--mud-palette-text-primary));
    background-color: var(--surface, var(--mud-palette-surface));
    border: 1px solid var(--hairline-strong, var(--mud-palette-lines-inputs));
    border-radius: var(--radius-sm, var(--mud-default-borderradius));
    background-position: right 8px center;
}
.mud-table-pagination-select:focus { outline: none; border-color: var(--accent-fg, var(--mud-palette-primary)); box-shadow: 0 0 0 3px var(--accent-soft, transparent); }
.mud-table-pagination-actions { display: inline-flex; align-items: center; gap: 4px; }

/*
 * Finger-sized where there are fingers. A sort label and a filter box are 24px and 34px of text-height
 * chrome, which is fine under a pointer and below the platform's 44px target under a thumb; growing them
 * only under a coarse pointer keeps a desktop table's header from gaining a row of dead space.
 */
@media (pointer: coarse) {
    .mud-table-sort-label,
    .mud-table-filter-input,
    .mud-table-pagination-select,
    .mud-menu-activator { min-height: var(--touch, 44px); }
}

@media (hover: hover) and (pointer: fine) {
    .mud-table-hover .mud-table-body .mud-table-row:hover { background-color: var(--mud-palette-table-hover); }
}

/* ---------- lists and navigation -------------------------------------------------------------- */

.mud-list { margin: 0; padding: 8px 0; list-style: none; }
.mud-list-dense { padding: 4px 0; }
.mud-list-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.mud-list-item-button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.mud-list-item.mud-selected { background-color: var(--mud-palette-action-default-hover); }
.mud-list-item-text { flex: 1 1 auto; }

.mud-navmenu { display: flex; flex-direction: column; }
.mud-nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: inherit; text-decoration: none; cursor: pointer; }
.mud-nav-link.mud-selected { background-color: var(--mud-palette-action-default-hover); color: var(--mud-palette-primary); }
.mud-nav-group > summary { list-style: none; }
.mud-nav-group > summary::-webkit-details-marker { display: none; }
.mud-nav-group-content { padding-inline-start: 16px; }

/* ---------- disclosure ------------------------------------------------------------------------ */

.mud-expansion-panels { display: flex; flex-direction: column; }
.mud-expand-panel { background-color: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); }
.mud-expand-panel-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; list-style: none; }
.mud-expand-panel-header::-webkit-details-marker { display: none; }
.mud-expand-panel-text { flex: 1 1 auto; }
.mud-expand-panel-icon { transition: transform 200ms ease; margin-inline-start: auto; }
.mud-expand-panel[open] > .mud-expand-panel-header .mud-expand-panel-icon { transform: rotate(180deg); }
.mud-expand-panel-content { padding: 0 16px 16px; }

.mud-menu { position: relative; display: inline-block; }
.mud-menu-activator { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.mud-menu-activator::-webkit-details-marker { display: none; }
.mud-menu-list { position: absolute; inset-inline-start: 0; top: 100%; z-index: var(--mud-zindex-popover); min-width: 180px; padding: 8px 0; border-radius: var(--mud-default-borderradius); background-color: var(--mud-palette-surface); box-shadow: var(--mud-elevation-8); }
.mud-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; border: 0; background: none; font: inherit; color: inherit; text-align: start; text-decoration: none; cursor: pointer; }

/* ---------- overlays -------------------------------------------------------------------------- */

.mud-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: var(--mud-zindex-dialog); }
.mud-overlay-scrim { position: absolute; inset: 0; background-color: var(--mud-palette-overlay-dark); }
.mud-dialog { position: relative; z-index: 1; max-width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; border-radius: var(--mud-default-borderradius); background-color: var(--mud-palette-surface, var(--surface, #fff)); color: var(--mud-palette-text-primary); box-shadow: var(--mud-elevation-24); }
.mud-dialog-width-extrasmall { max-width: min(444px, calc(100vw - 32px)); }
.mud-dialog-width-small { max-width: min(600px, calc(100vw - 32px)); }
.mud-dialog-width-medium { max-width: min(960px, calc(100vw - 32px)); }
.mud-dialog-width-large { max-width: min(1280px, calc(100vw - 32px)); }
.mud-dialog-width-full { width: calc(100vw - 32px); }
.mud-dialog-fullscreen { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; }
.mud-dialog-title { padding: 16px 24px 8px; }
.mud-dialog-content { padding: 8px 24px; }
.mud-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 16px 16px; }

/*
 * The drawer root is always present. A closed drawer is translated off-screen rather than unmounted, so a
 * part-filled form survives a close-and-reopen; the shell that wraps it marks its own content inert, which
 * keeps the hidden fields out of the tab order.
 */
.mud-drawer { position: fixed; top: 0; bottom: 0; z-index: var(--mud-zindex-drawer); display: flex; flex-direction: column; width: var(--mud-drawer-width, var(--mud-drawer-width-left)); max-width: 100vw; overflow-y: auto; background-color: var(--mud-palette-drawer-background, var(--surface, #fff)); color: var(--mud-palette-drawer-text); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1); }
.mud-drawer-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.mud-drawer-pos-start, .mud-drawer-pos-left { inset-inline-start: 0; }
.mud-drawer-pos-end, .mud-drawer-pos-right { inset-inline-end: 0; width: var(--mud-drawer-width, var(--mud-drawer-width-right)); }
.mud-drawer-pos-top { inset: 0 0 auto 0; width: 100%; height: auto; }
.mud-drawer-pos-bottom { inset: auto 0 0 0; width: 100%; height: auto; }
.mud-drawer--closed.mud-drawer-pos-start, .mud-drawer--closed.mud-drawer-pos-left { transform: translateX(-100%); }
.mud-drawer--closed.mud-drawer-pos-end, .mud-drawer--closed.mud-drawer-pos-right { transform: translateX(100%); }
.mud-drawer--closed.mud-drawer-pos-top { transform: translateY(-100%); }
.mud-drawer--closed.mud-drawer-pos-bottom { transform: translateY(100%); }
/* No entry animation on the very first paint: the panel was never anywhere else to slide from. */
.mud-drawer--initial { transition: none; }
/* One layer BELOW the drawer -- under the panel, over the page. Never a negative z-index: this used to be
   the drawer's own first child at z-index:-1, which inside the drawer's stacking context painted over the
   panel's surface instead of behind it (see MudDrawer.razor). It is a sibling now, and a real layer. */
.mud-drawer-scrim { position: fixed; inset: 0; z-index: calc(var(--mud-zindex-drawer) - 1); background-color: var(--mud-palette-overlay-dark); }

.mud-snackbar-provider { position: fixed; z-index: var(--mud-zindex-snackbar); display: flex; flex-direction: column; gap: 8px; pointer-events: none; padding: 16px; }
.mud-snackbar-provider > * { display: contents; }
.mud-snackbar-location-top-center { top: 0; left: 50%; transform: translateX(-50%); }
.mud-snackbar-location-top-left { top: 0; left: 0; }
.mud-snackbar-location-top-right { top: 0; right: 0; }
.mud-snackbar-location-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
.mud-snackbar-location-bottom-left { bottom: 0; left: 0; }
.mud-snackbar-location-bottom-right { bottom: 0; right: 0; }
.mud-snackbar { display: flex; align-items: center; gap: 12px; min-width: 288px; max-width: min(560px, calc(100vw - 32px)); margin-bottom: 8px; padding: 10px 16px; border-radius: var(--mud-default-borderradius); box-shadow: var(--mud-elevation-6); pointer-events: auto; }
.mud-snackbar-content-message { flex: 1 1 auto; }

.mud-tooltip-root { position: relative; display: inline-flex; }
.mud-tooltip { position: absolute; top: 100%; inset-inline-start: 50%; transform: translateX(-50%); z-index: var(--mud-zindex-tooltip); margin-top: 6px; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; white-space: nowrap; color: var(--mud-palette-surface); background-color: var(--mud-palette-text-primary); opacity: 0; visibility: hidden; transition: opacity 150ms ease; }
.mud-tooltip-root:hover .mud-tooltip, .mud-tooltip-root:focus-within .mud-tooltip { opacity: 0.95; visibility: visible; }

/* ---------- tabs, timeline, stepper, badge ----------------------------------------------------- */

.mud-tabs { display: flex; flex-direction: column; }
.mud-tabs-tabbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.mud-tabs-tabbar-inner { display: flex; gap: 4px; overflow-x: auto; }
.mud-tab { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; color: var(--mud-palette-text-secondary); cursor: pointer; white-space: nowrap; }
.mud-tab.mud-selected { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
.mud-tabs-panels { padding-top: 16px; }
.mud-tabs-centered .mud-tabs-tabbar-inner { justify-content: center; }

.mud-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.mud-timeline-item { display: flex; gap: 12px; }
.mud-timeline-item-dot { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background-color: var(--mud-palette-action-default-hover); }
.mud-timeline-item-content { flex: 1 1 auto; }

/*
 * The stepper's rail. A numbered list where the number IS the counter - one source for the step's position,
 * so a step cannot be labelled 3 while sitting second. The rail wraps on a phone rather than scrolling
 * sideways, and stacks under 640px where five labels in a row have nowhere to go.
 */
.mud-stepper-nav {
    margin: 0 0 var(--sp-4, 16px); padding: 0; list-style: none; counter-reset: mud-step;
    display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.mud-stepper-vertical .mud-stepper-nav { flex-direction: column; }
.mud-step { counter-increment: mud-step; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mud-step::before {
    content: counter(mud-step); flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; font-size: 0.75rem; font-weight: 600;
    border: 1px solid var(--hairline-strong, var(--mud-palette-lines-default));
    color: var(--ink-2, var(--mud-palette-text-secondary));
}
.mud-step-active::before {
    border-color: var(--accent-fg, var(--mud-palette-primary));
    background-color: var(--accent-fg, var(--mud-palette-primary));
    color: var(--mud-palette-primary-text);
}
.mud-step-completed::before {
    content: "\2713";
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}
.mud-stepper .mud-step-label {
    display: flex; flex-direction: column; min-width: 0; text-align: start;
    border: 0; background: none; font: inherit; color: inherit; padding: 0;
}
.mud-stepper button.mud-step-label { cursor: pointer; }
.mud-stepper button.mud-step-label:hover .mud-step-label-title { text-decoration: underline; }
.mud-step-label-title { font-weight: 500; }
.mud-step-label-secondary { font-size: 0.75rem; color: var(--ink-2, var(--mud-palette-text-secondary)); }
.mud-step-disabled { opacity: 0.5; }
.mud-stepper-content { min-width: 0; }
/* Next sits at the trailing end so the pair reads as back-then-forward in either writing direction. */
.mud-stepper-actions { display: flex; align-items: center; gap: 8px; margin-top: var(--sp-4, 16px); }
.mud-stepper-next { margin-inline-start: auto; }

.mud-badge-root { position: relative; display: inline-flex; }
.mud-badge { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 0.75rem; line-height: 1; }
.mud-badge-topright { top: 0; inset-inline-end: 0; transform: translate(50%, -50%); }
.mud-badge-topleft { top: 0; inset-inline-start: 0; transform: translate(-50%, -50%); }
.mud-badge-bottomright { bottom: 0; inset-inline-end: 0; transform: translate(50%, 50%); }
.mud-badge-centerright { top: 50%; inset-inline-end: 0; transform: translate(50%, -50%); }
.mud-badge-dot { min-width: 8px; height: 8px; padding: 0; }
.mud-badge-bordered { box-shadow: 0 0 0 2px var(--mud-palette-surface); }
.mud-stack-wrap-reverse { flex-wrap: wrap-reverse; }
.mud-menu-activator { border: 0; background: none; font: inherit; color: inherit; padding: 0; }
.mud-collapse-collapsed { display: none; }
.mud-tab-panel-hidden { display: none; }

/* ---------- spacing utilities ------------------------------------------------------------------
 *
 * The rhythm every operator form asks for by name. ~950 call sites across this platform's .razor
 * files pass these class names straight through (`Class="mb-2"`), because the retired package
 * shipped the scale and the surface was authored on top of it. They were not carried over with the
 * components, so since the swap every one of them has landed on its element and declared NOTHING.
 * Owner report (demo host, phone, 2026-09-09): stacked controls with no gap at all -- the region
 * filter, the show-archived switch and the add-location action flush against each other; the same
 * on an edit-location subpage and between an edit-menu's sections. One missing mechanism, not a
 * page-by-page regression, so it is restored as one.
 *
 * The scale is the package's own -- one step is 4px -- so a call site that read as an 8px gap before
 * reads as an 8px gap now and nothing has to be re-tuned. Stated in px rather than through a design
 * token deliberately: the standalone business host loads this sheet WITHOUT tokens.css, where a bare
 * token computes to nothing and would leave the gap at zero -- which is the defect being fixed.
 *
 * Last in the file, which is where the package kept them: every rule here is a single class (0,1,0),
 * so among equals the later one wins and a utility can still override a component's own margin.
 */

/* margin */
.ma-0 { margin: 0; } .ma-1 { margin: 4px; } .ma-2 { margin: 8px; } .ma-3 { margin: 12px; } .ma-4 { margin: 16px; } .ma-5 { margin: 20px; } .ma-6 { margin: 24px; } .ma-7 { margin: 28px; } .ma-8 { margin: 32px; } .ma-9 { margin: 36px; } .ma-10 { margin: 40px; } .ma-11 { margin: 44px; } .ma-12 { margin: 48px; } .ma-13 { margin: 52px; } .ma-14 { margin: 56px; } .ma-15 { margin: 60px; } .ma-16 { margin: 64px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-7 { margin-top: 28px; } .mt-8 { margin-top: 32px; } .mt-9 { margin-top: 36px; } .mt-10 { margin-top: 40px; } .mt-11 { margin-top: 44px; } .mt-12 { margin-top: 48px; } .mt-13 { margin-top: 52px; } .mt-14 { margin-top: 56px; } .mt-15 { margin-top: 60px; } .mt-16 { margin-top: 64px; }
.mr-0 { margin-right: 0; } .mr-1 { margin-right: 4px; } .mr-2 { margin-right: 8px; } .mr-3 { margin-right: 12px; } .mr-4 { margin-right: 16px; } .mr-5 { margin-right: 20px; } .mr-6 { margin-right: 24px; } .mr-7 { margin-right: 28px; } .mr-8 { margin-right: 32px; } .mr-9 { margin-right: 36px; } .mr-10 { margin-right: 40px; } .mr-11 { margin-right: 44px; } .mr-12 { margin-right: 48px; } .mr-13 { margin-right: 52px; } .mr-14 { margin-right: 56px; } .mr-15 { margin-right: 60px; } .mr-16 { margin-right: 64px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; } .mb-7 { margin-bottom: 28px; } .mb-8 { margin-bottom: 32px; } .mb-9 { margin-bottom: 36px; } .mb-10 { margin-bottom: 40px; } .mb-11 { margin-bottom: 44px; } .mb-12 { margin-bottom: 48px; } .mb-13 { margin-bottom: 52px; } .mb-14 { margin-bottom: 56px; } .mb-15 { margin-bottom: 60px; } .mb-16 { margin-bottom: 64px; }
.ml-0 { margin-left: 0; } .ml-1 { margin-left: 4px; } .ml-2 { margin-left: 8px; } .ml-3 { margin-left: 12px; } .ml-4 { margin-left: 16px; } .ml-5 { margin-left: 20px; } .ml-6 { margin-left: 24px; } .ml-7 { margin-left: 28px; } .ml-8 { margin-left: 32px; } .ml-9 { margin-left: 36px; } .ml-10 { margin-left: 40px; } .ml-11 { margin-left: 44px; } .ml-12 { margin-left: 48px; } .ml-13 { margin-left: 52px; } .ml-14 { margin-left: 56px; } .ml-15 { margin-left: 60px; } .ml-16 { margin-left: 64px; }
.mx-0 { margin-left: 0; margin-right: 0; } .mx-1 { margin-left: 4px; margin-right: 4px; } .mx-2 { margin-left: 8px; margin-right: 8px; } .mx-3 { margin-left: 12px; margin-right: 12px; } .mx-4 { margin-left: 16px; margin-right: 16px; } .mx-5 { margin-left: 20px; margin-right: 20px; } .mx-6 { margin-left: 24px; margin-right: 24px; } .mx-7 { margin-left: 28px; margin-right: 28px; } .mx-8 { margin-left: 32px; margin-right: 32px; } .mx-9 { margin-left: 36px; margin-right: 36px; } .mx-10 { margin-left: 40px; margin-right: 40px; } .mx-11 { margin-left: 44px; margin-right: 44px; } .mx-12 { margin-left: 48px; margin-right: 48px; } .mx-13 { margin-left: 52px; margin-right: 52px; } .mx-14 { margin-left: 56px; margin-right: 56px; } .mx-15 { margin-left: 60px; margin-right: 60px; } .mx-16 { margin-left: 64px; margin-right: 64px; }
.my-0 { margin-top: 0; margin-bottom: 0; } .my-1 { margin-top: 4px; margin-bottom: 4px; } .my-2 { margin-top: 8px; margin-bottom: 8px; } .my-3 { margin-top: 12px; margin-bottom: 12px; } .my-4 { margin-top: 16px; margin-bottom: 16px; } .my-5 { margin-top: 20px; margin-bottom: 20px; } .my-6 { margin-top: 24px; margin-bottom: 24px; } .my-7 { margin-top: 28px; margin-bottom: 28px; } .my-8 { margin-top: 32px; margin-bottom: 32px; } .my-9 { margin-top: 36px; margin-bottom: 36px; } .my-10 { margin-top: 40px; margin-bottom: 40px; } .my-11 { margin-top: 44px; margin-bottom: 44px; } .my-12 { margin-top: 48px; margin-bottom: 48px; } .my-13 { margin-top: 52px; margin-bottom: 52px; } .my-14 { margin-top: 56px; margin-bottom: 56px; } .my-15 { margin-top: 60px; margin-bottom: 60px; } .my-16 { margin-top: 64px; margin-bottom: 64px; }

/* padding */
.pa-0 { padding: 0; } .pa-1 { padding: 4px; } .pa-2 { padding: 8px; } .pa-3 { padding: 12px; } .pa-4 { padding: 16px; } .pa-5 { padding: 20px; } .pa-6 { padding: 24px; } .pa-7 { padding: 28px; } .pa-8 { padding: 32px; } .pa-9 { padding: 36px; } .pa-10 { padding: 40px; } .pa-11 { padding: 44px; } .pa-12 { padding: 48px; } .pa-13 { padding: 52px; } .pa-14 { padding: 56px; } .pa-15 { padding: 60px; } .pa-16 { padding: 64px; }
.pt-0 { padding-top: 0; } .pt-1 { padding-top: 4px; } .pt-2 { padding-top: 8px; } .pt-3 { padding-top: 12px; } .pt-4 { padding-top: 16px; } .pt-5 { padding-top: 20px; } .pt-6 { padding-top: 24px; } .pt-7 { padding-top: 28px; } .pt-8 { padding-top: 32px; } .pt-9 { padding-top: 36px; } .pt-10 { padding-top: 40px; } .pt-11 { padding-top: 44px; } .pt-12 { padding-top: 48px; } .pt-13 { padding-top: 52px; } .pt-14 { padding-top: 56px; } .pt-15 { padding-top: 60px; } .pt-16 { padding-top: 64px; }
.pr-0 { padding-right: 0; } .pr-1 { padding-right: 4px; } .pr-2 { padding-right: 8px; } .pr-3 { padding-right: 12px; } .pr-4 { padding-right: 16px; } .pr-5 { padding-right: 20px; } .pr-6 { padding-right: 24px; } .pr-7 { padding-right: 28px; } .pr-8 { padding-right: 32px; } .pr-9 { padding-right: 36px; } .pr-10 { padding-right: 40px; } .pr-11 { padding-right: 44px; } .pr-12 { padding-right: 48px; } .pr-13 { padding-right: 52px; } .pr-14 { padding-right: 56px; } .pr-15 { padding-right: 60px; } .pr-16 { padding-right: 64px; }
.pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: 4px; } .pb-2 { padding-bottom: 8px; } .pb-3 { padding-bottom: 12px; } .pb-4 { padding-bottom: 16px; } .pb-5 { padding-bottom: 20px; } .pb-6 { padding-bottom: 24px; } .pb-7 { padding-bottom: 28px; } .pb-8 { padding-bottom: 32px; } .pb-9 { padding-bottom: 36px; } .pb-10 { padding-bottom: 40px; } .pb-11 { padding-bottom: 44px; } .pb-12 { padding-bottom: 48px; } .pb-13 { padding-bottom: 52px; } .pb-14 { padding-bottom: 56px; } .pb-15 { padding-bottom: 60px; } .pb-16 { padding-bottom: 64px; }
.pl-0 { padding-left: 0; } .pl-1 { padding-left: 4px; } .pl-2 { padding-left: 8px; } .pl-3 { padding-left: 12px; } .pl-4 { padding-left: 16px; } .pl-5 { padding-left: 20px; } .pl-6 { padding-left: 24px; } .pl-7 { padding-left: 28px; } .pl-8 { padding-left: 32px; } .pl-9 { padding-left: 36px; } .pl-10 { padding-left: 40px; } .pl-11 { padding-left: 44px; } .pl-12 { padding-left: 48px; } .pl-13 { padding-left: 52px; } .pl-14 { padding-left: 56px; } .pl-15 { padding-left: 60px; } .pl-16 { padding-left: 64px; }
.px-0 { padding-left: 0; padding-right: 0; } .px-1 { padding-left: 4px; padding-right: 4px; } .px-2 { padding-left: 8px; padding-right: 8px; } .px-3 { padding-left: 12px; padding-right: 12px; } .px-4 { padding-left: 16px; padding-right: 16px; } .px-5 { padding-left: 20px; padding-right: 20px; } .px-6 { padding-left: 24px; padding-right: 24px; } .px-7 { padding-left: 28px; padding-right: 28px; } .px-8 { padding-left: 32px; padding-right: 32px; } .px-9 { padding-left: 36px; padding-right: 36px; } .px-10 { padding-left: 40px; padding-right: 40px; } .px-11 { padding-left: 44px; padding-right: 44px; } .px-12 { padding-left: 48px; padding-right: 48px; } .px-13 { padding-left: 52px; padding-right: 52px; } .px-14 { padding-left: 56px; padding-right: 56px; } .px-15 { padding-left: 60px; padding-right: 60px; } .px-16 { padding-left: 64px; padding-right: 64px; }
.py-0 { padding-top: 0; padding-bottom: 0; } .py-1 { padding-top: 4px; padding-bottom: 4px; } .py-2 { padding-top: 8px; padding-bottom: 8px; } .py-3 { padding-top: 12px; padding-bottom: 12px; } .py-4 { padding-top: 16px; padding-bottom: 16px; } .py-5 { padding-top: 20px; padding-bottom: 20px; } .py-6 { padding-top: 24px; padding-bottom: 24px; } .py-7 { padding-top: 28px; padding-bottom: 28px; } .py-8 { padding-top: 32px; padding-bottom: 32px; } .py-9 { padding-top: 36px; padding-bottom: 36px; } .py-10 { padding-top: 40px; padding-bottom: 40px; } .py-11 { padding-top: 44px; padding-bottom: 44px; } .py-12 { padding-top: 48px; padding-bottom: 48px; } .py-13 { padding-top: 52px; padding-bottom: 52px; } .py-14 { padding-top: 56px; padding-bottom: 56px; } .py-15 { padding-top: 60px; padding-bottom: 60px; } .py-16 { padding-top: 64px; padding-bottom: 64px; }

/* auto centring -- margins only, as in the package */
.ma-auto { margin: auto; } .mt-auto { margin-top: auto; } .mr-auto { margin-right: auto; } .mb-auto { margin-bottom: auto; } .ml-auto { margin-left: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .my-auto { margin-top: auto; margin-bottom: auto; }
