/*
 * Components — the Industry blueprint layer, and the MudBlazor chrome it has to reach.
 *
 * The design system's rule: cards, figures and buttons are wireframe objects — square-cornered,
 * hairline-bordered, transparent — and the solid accent primary button is the one deliberate
 * exception. Everything below is that rule applied to the controls this app actually renders.
 *
 * Most of this file is MudBlazor mapping rather than new classes, because sixty-five pages are
 * already written against MudTable, MudButton and MudTextField. Rewriting their markup to
 * hand-rolled elements would be a far larger change than restyling the components they use, and
 * would lose MudBlazor's keyboard and ARIA behaviour with it. Nothing here needs !important:
 * MudBlazor sits in the `mud` cascade layer, below everything this folder authors.
 */
@layer spec.components {
    /* ——————————————————————————————————————————————————————
       The blueprint rule

       Stated once, at the top, so no component has to remember it. Everything the design system
       calls an object is square; only genuinely non-component surfaces may carry a radius.
       —————————————————————————————————————————————————————— */
    #main-content .mud-button-root,
    #main-content .mud-input,
    #main-content .mud-input-outlined-border,
    #main-content .mud-card,
    #main-content .mud-paper,
    #main-content .mud-table,
    #main-content .mud-chip,
    #main-content .mud-alert,
    #main-content input,
    #main-content select,
    #main-content textarea,
    .spec-rail__badge,
    .spec-pill,
    .mud-dialog,
    .mud-popover {
        border-radius: 0;
    }

    /* ——————————————————————————————————————————————————————
       Page container
       —————————————————————————————————————————————————————— */
    .page-container {
        padding: var(--gutter-y) var(--gutter) var(--sp-8);
        max-width: none;
    }

    /* ——————————————————————————————————————————————————————
       Buttons

       .btn in the design system: heading font, 14px 600, square, hairline. The primary is the
       one solid object on the board.
       —————————————————————————————————————————————————————— */
    #main-content .mud-button-root,
    .spec-btn {
        font-family: var(--font-heading);
        font-weight: var(--weight-semibold);
        font-size: var(--text-sm);
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
        min-height: var(--control-h-sm);
        padding: 6px 11px;
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-surface);
        color: var(--spec-ink);
        box-shadow: none;
        transition: background-color var(--dur-base) var(--ease-standard),
                    border-color var(--dur-base) var(--ease-standard),
                    color var(--dur-base) var(--ease-standard);
    }

    #main-content .mud-button-root:hover {
        background: var(--wash-ink-7);
        box-shadow: none;
    }

    #main-content .mud-button-root:active {
        background: var(--wash-ink-14);
    }

    /* Primary — the solid accent object. */
    #main-content .mud-button-filled.mud-button-filled-primary,
    .spec-btn--primary {
        background: var(--color-accent);
        border-color: var(--color-accent-700);
        color: var(--spec-on-accent);
    }

    #main-content .mud-button-filled.mud-button-filled-primary:hover {
        background: var(--color-accent-600);
    }

    #main-content .mud-button-filled.mud-button-filled-primary:active {
        background: var(--color-accent-700);
    }

    /* Ghost — accent text, no frame. */
    #main-content .mud-button-text {
        border-color: transparent;
        background: transparent;
        color: var(--color-accent-700);
        padding-inline: var(--sp-1);
    }

    #main-content .mud-button-text:hover {
        background: var(--wash-accent-10);
        color: var(--color-accent-900);
    }

    #main-content .mud-button-text:active {
        background: var(--wash-accent-18);
    }

    /* Destructive keeps the frame and takes the stop role rather than a fill. */
    #main-content .mud-button-root.mud-button-outlined-error,
    #main-content .mud-button-root.mud-button-text-error {
        color: var(--stop);
        border-color: var(--stop-b);
    }

    #main-content .mud-button-root.mud-button-outlined-error:hover,
    #main-content .mud-button-root.mud-button-text-error:hover {
        background: var(--stop-t);
    }

    /*
     * A refused action is said in colour, not in opacity (§3.8). Opacity fades the label with the
     * frame, which is exactly the text a reader needs in order to work out what they cannot do —
     * and on a tinted row it also lets the row's colour bleed through the button.
     */
    #main-content .mud-button-root:disabled,
    #main-content .mud-button-root.mud-disabled {
        color: var(--color-neutral-500);
        background: var(--color-neutral-200);
        border-color: var(--color-neutral-400);
        box-shadow: none;
    }

    #main-content .mud-button-text:disabled,
    #main-content .mud-button-text.mud-disabled {
        background: transparent;
        border-color: transparent;
    }

    #main-content .mud-icon-button:disabled,
    #main-content .mud-icon-button.mud-disabled {
        color: var(--color-neutral-500);
        background: transparent;
        border-color: transparent;
    }

    #main-content .mud-icon-button {
        min-width: var(--control-h-sm);
        width: var(--control-h-sm);
        height: var(--control-h-sm);
        padding: 0;
        border-color: transparent;
        background: transparent;
        color: var(--color-accent-700);
    }

    #main-content .mud-icon-button:hover {
        background: var(--wash-accent-10);
    }

    /*
     * Numeric steppers live inside the 31px field. The button rules above force 28px chrome on
     * every .mud-button-root, and two of those cannot stack in the box — the arrows overflow the
     * field and sit on the label. MudBlazor already unset min-height on these; the ID-scoped
     * rules win, so the shrink is restated here.
     */
    #main-content .mud-input-numeric-spin {
        width: 1.5rem;
        z-index: 1;
    }

    #main-content .mud-input-numeric-spin .mud-button-root {
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: calc(var(--control-h) / 2);
        padding: 0;
        border: none;
        background: transparent;
        color: var(--color-accent-700);
    }

    #main-content .mud-input-numeric-spin .mud-button-root:hover {
        background: var(--wash-accent-10);
    }

    #main-content .mud-input-numeric-spin .mud-button-root:focus-visible {
        outline-offset: calc(-1 * var(--spec-focus-width));
    }

    #main-content .mud-input-numeric-spin .mud-icon-root {
        width: 14px;
        height: 14px;
        font-size: 14px;
    }

    /* ——————————————————————————————————————————————————————
       Fields

       The mockup's field is white on the light ground with a neutral-400 hairline — not the
       design system's surface fill, which disappears against this page.
       —————————————————————————————————————————————————————— */
    #main-content .mud-input.mud-input-outlined {
        background: var(--spec-field);
        align-items: center;
        min-height: var(--control-h);
    }

    #main-content .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-color: var(--color-neutral-400);
        border-width: 1px;
    }

    #main-content .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
        border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
    }

    #main-content .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
        border-color: var(--color-accent);
        border-width: 1px;
    }

    #main-content .mud-input-root,
    #main-content .mud-input-slot {
        font-family: var(--font-body);
        font-size: var(--text-base);
        font-weight: var(--weight-regular);
        line-height: var(--leading-snug);
        padding: 7px 10px;
        color: var(--spec-ink);
        caret-color: var(--color-accent);
    }

    /* An adornment already provides the inset on its side. */
    #main-content .mud-input-adorned-start .mud-input-root {
        padding-left: 0;
    }

    #main-content .mud-input-adorned-end .mud-input-root {
        padding-right: 0;
    }

    /*
     * Labels sit above the field, per the design system's `.field > label`. MudBlazor's outlined
     * label is absolutely positioned and transformed into a notch cut in the border; both are
     * undone here rather than in markup, because the alternative is rewriting every field on
     * sixty-five pages to a hand-rolled label + input pair and losing MudBlazor's `for`/`id`
     * wiring with it.
     */
    #main-content .mud-input-control.mud-input-outlined-with-label {
        margin-top: 0;
    }

    /* MudBlazor emits the label AFTER the input, because in its own layout the label is
       absolutely positioned and source order does not matter. Taking it out of that positioning
       makes order matter again, and the label landed under the box. */
    #main-content .mud-input-control:has(> .mud-input-label-inputcontrol) {
        display: flex;
        flex-direction: column;
    }

    #main-content .mud-input-label.mud-input-label-inputcontrol {
        order: -1;
        position: static;
        transform: none;
        transform-origin: initial;
        display: block;
        max-width: 100%;
        margin-bottom: 5px;
        padding: 0;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: var(--weight-regular);
        line-height: 1.4;
        color: color-mix(in srgb, var(--color-text) 70%, transparent);
        pointer-events: auto;
    }

    #main-content .mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
        top: auto;
        left: auto;
    }

    /* The notch is a legend cut in the fieldset for a label that is no longer there. */
    #main-content .mud-input.mud-input-outlined .mud-input-outlined-border legend {
        display: none;
    }

    #main-content .mud-input.mud-input-outlined.mud-disabled {
        background: var(--color-neutral-200);
    }

    /*
     * A label above a control that is not a MudBlazor field — a SpecSegmented, a SpecCheck group.
     * Matches the label treatment above exactly, so the two kinds of control line up in a grid.
     */
    .spec-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .spec-field__label {
        margin-bottom: 5px;
        font-family: var(--font-body);
        font-size: 12px;
        line-height: 1.4;
        color: color-mix(in srgb, var(--color-text) 70%, transparent);
    }

    /* The control keeps its intrinsic width instead of stretching across the grid cell. */
    .spec-field > .segmented {
        align-self: flex-start;
    }

    /* Native controls a page renders itself, outside a MudBlazor wrapper. */
    #main-content :not(.mud-input) > input.mud-input-root,
    #main-content :not(.mud-input) > select.mud-input-root {
        min-height: var(--control-h);
        height: var(--control-h);
        width: 100%;
        padding: 6px 10px;
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-field);
        color: var(--spec-ink);
        font: inherit;
        font-size: var(--text-sm);
        box-sizing: border-box;
    }

    /* ——————————————————————————————————————————————————————
       Tables

       Two treatments. A ledger — anything with figures to reconcile — gets the mockup's dark
       accent-900 header bar, because a dense grid needs its columns held down by something
       heavier than a rule. Everything else takes the design system's quieter uppercase header.
       —————————————————————————————————————————————————————— */
    #main-content .mud-table {
        background: var(--spec-surface);
        border: 1px solid var(--color-neutral-400);
        box-shadow: none;
    }

    /*
     * A list table's header: the design system's `.table th` — uppercase, tracked, muted, on a
     * rule. This is the default because most tables in the app are lists.
     */
    /* Header text is 9.5px, which is the smallest type in the app: it takes neutral-800 so the
       column names stay readable against the rows they name (§3.8). */
    #main-content .mud-table-head .mud-table-cell {
        height: auto;
        padding: 8px;
        background: transparent;
        color: var(--color-neutral-800);
        font-family: var(--font-heading);
        font-size: var(--text-2xs);
        font-weight: var(--weight-semibold);
        line-height: 1;
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        border-bottom: 1px solid var(--color-neutral-400);
        white-space: nowrap;
    }

    /*
     * A ledger's header: the mockup's solid accent-900 bar. A grid of figures that has to be
     * reconciled column by column needs its columns held down by something heavier than a rule,
     * and this is the one place in the system that carries a full dark field.
     */
    #main-content .ledger-grid .mud-table-head .mud-table-cell {
        height: 30px;
        padding-top: 0;
        padding-bottom: 0;
        background: var(--color-accent-900);
        color: var(--spec-on-dark);
        border-bottom: 0;
    }

    #main-content .ledger-grid.mud-table {
        border-color: var(--color-neutral-400);
    }

    #main-content .mud-table-head .mud-table-cell .mud-button-root.mud-table-sort-label,
    #main-content .mud-table-head .mud-table-cell .mud-table-sort-label .mud-icon-root {
        font: inherit;
        letter-spacing: inherit;
        text-transform: inherit;
        color: inherit;
        background: transparent;
        border: 0;
        min-height: 0;
        padding: 0;
    }

    /*
     * Row density is the mockup's: 7px of padding around a 12.5px line, so a row is ~29px rather
     * than MudBlazor's 42px. On a 24-row client list that is 300px of page, and on a 400-row
     * ledger it is the difference between reading a trial balance and scrolling one.
     */
    #main-content .mud-table-body .mud-table-row {
        height: auto;
    }

    /*
     * A control inside a row must not set the row's height. A 28px button in one cell made every
     * row 44px when the text in it is 17px — the mockup's row action is a plain link for exactly
     * this reason, and its status tag is 19px.
     */
    /*
     * A control inside a row must not set the row's height. MudBlazor gives a chip a 4px margin
     * on every side, which on a 19px chip made the row 42px where the mockup's is 33 — nine
     * pixels of nothing, twenty-four times down a client list.
     */
    #main-content .mud-table-body .mud-button-root,
    #main-content .mud-table-body .mud-chip {
        margin: 0;
        min-height: 0;
        height: auto;
        vertical-align: middle;
    }

    /* No vertical padding: the mockup's row action is a plain link, and the tallest thing in a
       row should be the status tag, not the way out of it. */
    #main-content .mud-table-body .mud-button-root {
        padding: 0 6px;
    }

    /*
     * An inline-block sits on the baseline, so the cell's line box reserves room for a descender
     * under it — eight invisible pixels per row, which on a full ledger is a screenful. Aligning
     * to the middle removes the baseline from the calculation.
     */
    #main-content .mud-table-body .mud-table-cell {
        vertical-align: middle;
    }

    #main-content .mud-table-body .mud-table-cell > * {
        vertical-align: middle;
    }

    #main-content .mud-table-body .mud-chip {
        padding: 2px 8px;
        font-size: 10.5px;
    }

    /* A block-level link creates no inline line box, so the cell is exactly its content tall. */
    #main-content .portfolio-table__name {
        display: block;
        line-height: var(--leading-snug);
    }

    #main-content .mud-table-body .mud-table-cell {
        height: auto;
        padding: 7px 8px;
        font-size: 12.5px;
        line-height: var(--leading-snug);
        border-bottom: 1px solid var(--color-divider);
        color: var(--spec-ink);
    }

    #main-content .mud-table-body .mud-table-row:hover .mud-table-cell {
        background: var(--wash-ink-4);
    }

    #main-content .mud-table-foot .mud-table-cell {
        height: 34px;
        padding: 0 8px;
        border-top: 2px solid var(--color-accent-900);
        border-bottom: 0;
        background: var(--color-neutral-200);
        font-weight: var(--weight-semibold);
        font-size: 12px;
    }

    .ledger-totals__label {
        font: var(--weight-semibold) 10px/1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
    }

    /* Figures line up: mono, tabular, right-aligned. */
    #main-content .mud-table-cell.mud-table-cell-align-right,
    .tabular-nums {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    /* ——————————————————————————————————————————————————————
       Tags and chips
       —————————————————————————————————————————————————————— */
    #main-content .mud-chip {
        height: auto;
        min-height: 0;
        padding: 3px 10px;
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: var(--weight-regular);
        letter-spacing: 0.02em;
        background: var(--color-neutral-100);
        color: var(--spec-ink);
        border: 1px solid transparent;
        box-shadow: none;
    }

    #main-content .mud-chip.mud-chip-outlined {
        background: transparent;
        border-color: var(--color-accent);
        color: var(--color-accent-700);
    }

    #main-content .mud-chip.mud-chip-filled.mud-chip-color-primary {
        background: var(--color-accent-100);
        color: var(--color-accent-800);
    }

    #main-content .mud-chip.mud-chip-filled.mud-chip-color-success {
        background: var(--ok-t);
        color: var(--ok);
        border-color: var(--ok-b);
    }

    #main-content .mud-chip.mud-chip-filled.mud-chip-color-warning {
        background: var(--warn-t);
        color: var(--warn);
        border-color: var(--warn-b);
    }

    #main-content .mud-chip.mud-chip-filled.mud-chip-color-error {
        background: var(--stop-t);
        color: var(--stop);
        border-color: var(--stop-b);
    }

    /* ——————————————————————————————————————————————————————
       Cards and surfaces

       Transparent line drawings, per the system. A card is a frame, not a filled block.
       —————————————————————————————————————————————————————— */
    #main-content .mud-card,
    #main-content .mud-paper,
    .surface-card,
    .signal-card,
    .kpi-stat,
    .health-score,
    .client-card,
    .placeholder-panel {
        background: transparent;
        border: 1px solid var(--color-divider);
        box-shadow: none;
    }

    #main-content .mud-card-header {
        padding: var(--sp-3) var(--sp-4) 0;
    }

    #main-content .mud-card-content {
        padding: var(--sp-3) var(--sp-4);
    }

    .placeholder-panel {
        padding: var(--sp-6);
    }

    .placeholder-panel__icon {
        font-size: var(--sp-8);
        color: var(--color-neutral-600);
    }

    .placeholder-panel__reason {
        max-width: 36rem;
        text-wrap: pretty;
    }

    .signal-card {
        padding: var(--sp-3) var(--sp-4);
    }

    .section-title {
        font-family: var(--font-heading);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-tight);
        margin-bottom: var(--sp-2);
    }

    .hint-chip {
        opacity: 0.72;
    }

    .kpi-stat,
    .client-card {
        min-height: 100%;
        transition: border-color var(--dur-base) var(--ease-standard);
    }

    .kpi-stat:hover,
    .client-card:hover {
        border-color: var(--color-neutral-400);
    }

    .kpi-stat__label {
        font-family: var(--font-heading);
        font-size: var(--text-2xs);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .kpi-stat__value {
        font-family: var(--font-mono);
        font-weight: var(--weight-semibold);
        letter-spacing: 0;
    }

    .kpi-stat__bar {
        height: 3px;
    }

    .kpi-stat__note {
        color: var(--color-neutral-700);
    }

    .health-score__gauge {
        position: relative;
        width: 88px;
        height: 88px;
        flex-shrink: 0;
    }

    .health-score__gauge .mud-progress-circular {
        width: 88px;
        height: 88px;
    }

    .health-score__reading {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-weight: var(--weight-semibold);
    }

    .health-score__summary {
        max-width: 28rem;
        text-wrap: pretty;
    }

    /* ——————————————————————————————————————————————————————
       Notes — the mockup's left-barred callout

       The one shape that carries a status: a tint, a hairline, a 3px bar in the role colour, an
       uppercase kicker and the sentence. MudAlert is mapped onto it so pages that already emit
       alerts get the treatment without changing their markup.
       —————————————————————————————————————————————————————— */
    .spec-note,
    #main-content .mud-alert {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 12px;
        background: var(--tone-tint, var(--color-neutral-100));
        border: 1px solid var(--tone-line, var(--color-divider));
        border-left: 3px solid var(--tone, var(--color-neutral-500));
        color: var(--spec-ink);
        font-size: 12px;
        line-height: var(--leading-snug);
        box-shadow: none;
        flex-wrap: wrap;
    }

    .spec-note__label {
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--tone, var(--color-neutral-700));
    }

    /* The figure is the point of the row, so it is the one thing set at 15px. */
    .spec-note__value {
        font: var(--weight-semibold) 15px var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: var(--tone, var(--spec-ink));
    }

    .spec-note__help {
        color: var(--color-neutral-800);
        min-width: 0;
        text-wrap: pretty;
    }

    .spec-note--ok,
    #main-content .mud-alert.mud-alert-text-success,
    #main-content .mud-alert.mud-alert-filled-success,
    #main-content .mud-alert.mud-alert-outlined-success {
        --tone: var(--ok);
        --tone-tint: var(--ok-t);
        --tone-line: var(--ok-b);
        color: var(--color-neutral-900);
    }

    .spec-note--warn,
    #main-content .mud-alert.mud-alert-text-warning,
    #main-content .mud-alert.mud-alert-filled-warning,
    #main-content .mud-alert.mud-alert-outlined-warning {
        --tone: var(--warn);
        --tone-tint: var(--warn-t);
        --tone-line: var(--warn-b);
        color: var(--color-neutral-900);
    }

    .spec-note--stop,
    #main-content .mud-alert.mud-alert-text-error,
    #main-content .mud-alert.mud-alert-filled-error,
    #main-content .mud-alert.mud-alert-outlined-error {
        --tone: var(--stop);
        --tone-tint: var(--stop-t);
        --tone-line: var(--stop-b);
        color: var(--color-neutral-900);
    }

    .spec-note--info,
    #main-content .mud-alert.mud-alert-text-info,
    #main-content .mud-alert.mud-alert-filled-info,
    #main-content .mud-alert.mud-alert-outlined-info {
        --tone: var(--color-accent);
        --tone-tint: var(--color-accent-100);
        --tone-line: var(--color-accent-300);
        color: var(--color-accent-900);
    }

    #main-content .mud-alert .mud-alert-icon {
        color: inherit;
        padding-right: var(--sp-2);
    }

    /* ——————————————————————————————————————————————————————
       Close desk

       A status panel and a preconditions rail, per the mockup. The facts were all on the page
       before, as four separate alerts; what the design adds is one place that answers "can this
       run, and why not".

       Tone is one custom property per state, so a panel, its kicker, its title and a checklist
       glyph cannot end up wearing different roles.
       —————————————————————————————————————————————————————— */
    .spec-close {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 18px;
        align-items: start;
        max-width: 1060px;
    }

    @media (max-width: 959.95px) {
        .spec-close {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .is-neutral { --tone: var(--color-neutral-700); --tone-tint: var(--color-neutral-100); --tone-line: var(--color-divider); }
    .is-accent  { --tone: var(--color-accent-800);  --tone-tint: var(--color-accent-100);  --tone-line: var(--color-accent-300); }
    .is-ok      { --tone: var(--ok);                --tone-tint: var(--ok-t);              --tone-line: var(--ok-b); }
    .is-warn    { --tone: var(--warn);              --tone-tint: var(--warn-t);            --tone-line: var(--warn-b); }
    .is-stop    { --tone: var(--stop);              --tone-tint: var(--stop-t);            --tone-line: var(--stop-b); }

    .spec-panel {
        border: 1px solid var(--tone-line, var(--color-divider));
        background: var(--spec-surface);
    }

    .spec-panel__head {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 13px 16px;
        background: var(--tone-tint, var(--color-neutral-100));
        border-bottom: 1px solid var(--tone-line, var(--color-divider));
    }

    .spec-panel__kicker {
        font: var(--weight-semibold) 10px/1 var(--font-heading);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tone, var(--color-neutral-700));
    }

    .spec-panel__meta {
        margin-left: auto;
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--color-neutral-800);
    }

    .spec-panel__body {
        padding: 16px;
    }

    .spec-panel__title {
        font: var(--weight-semibold) 20px/1.25 var(--font-heading);
        color: var(--tone, var(--spec-ink));
    }

    .spec-panel__text {
        font-size: 12.5px;
        line-height: 1.6;
        margin-top: 7px;
        max-width: 620px;
        text-wrap: pretty;
    }

    .spec-panel__actions {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 18px;
        flex-wrap: wrap;
    }

    .spec-panel__hint {
        margin-left: auto;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    /* The close's primary action is the one button on the desk that gets the design system's
       full-size treatment; everything else here is 11.5px chrome. */
    #main-content .spec-panel__actions .mud-button-filled-primary {
        padding: 9px 18px;
        font-size: 13px;
    }

    /* A refusal names its check, says what happened, and offers the way out. */
    .spec-refusal {
        padding: 10px 12px;
        margin-top: 7px;
        background: var(--stop-t);
        border: 1px solid var(--stop-b);
        border-left: 3px solid var(--stop);
    }

    .spec-refusal__code {
        font: var(--weight-regular) var(--text-xs) / 1 var(--font-mono);
        letter-spacing: 0.04em;
        color: var(--stop);
    }

    .spec-refusal__message {
        font-size: 12.5px;
        line-height: 1.5;
        margin-top: 5px;
        text-wrap: pretty;
    }

    .spec-checklist {
        border: 1px solid var(--color-divider);
        background: var(--spec-surface);
        padding: 13px 15px;
    }

    .spec-checklist__title {
        font: var(--weight-semibold) 10px/1 var(--font-heading);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .spec-checklist__row {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 9px;
        align-items: start;
        padding: 8px 0;
        border-bottom: 1px dotted var(--color-divider);
    }

    .spec-checklist__row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .spec-checklist__glyph {
        font: var(--weight-regular) 12px/1.3 var(--font-mono);
        color: var(--tone, var(--color-neutral-700));
    }

    .spec-checklist__label {
        font-size: 12px;
        line-height: 1.35;
        color: var(--spec-ink);
    }

    /* An unmet precondition is the row worth reading, so it is the one that gets weight. */
    .spec-checklist__row.is-warn .spec-checklist__label {
        font-weight: var(--weight-semibold);
        color: var(--tone);
    }

    .spec-checklist__note {
        font-size: 11px;
        line-height: 1.4;
        color: var(--color-neutral-700);
        margin-top: 2px;
        text-wrap: pretty;
    }

    /* The one tinted card in the system: an aside that points at another tool. */
    .spec-callout {
        margin-top: 14px;
        padding: 13px 15px;
        border: 1px solid var(--color-accent-300);
        background: var(--color-accent-100);
    }

    .spec-callout__title {
        font: var(--weight-semibold) 10px/1 var(--font-heading);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-accent-800);
    }

    .spec-callout__body {
        font-size: 12px;
        line-height: 1.55;
        margin-top: 7px;
        color: var(--color-accent-900);
        text-wrap: pretty;
    }

    #main-content .spec-callout .mud-button-root {
        margin-top: 10px;
        padding: 7px 12px;
        background: transparent;
        border-color: var(--color-accent-600);
        color: var(--color-accent-800);
        font-size: 12px;
    }

    /* ——————————————————————————————————————————————————————
       Segmented control

       One control, pick one state. Flush cells inside a single hairline frame; the chosen cell
       is an accent fill, per the mockup's level and status switches. Styled off aria-pressed /
       aria-current so the accessible state and the visible state cannot drift apart.

       Deliberately NOT scoped to #main-content: the same control appears in the study head, in a
       dialog and in a page header's toolbar row, none of which are inside the main region. The
       cell selectors name a `button`/`a`/`.mud-button-root` child rather than `*`, so a stray
       label or divider inside the frame is not styled as a cell.
       —————————————————————————————————————————————————————— */
    .segmented {
        display: inline-flex;
        min-width: 0;
        border: 1px solid var(--color-divider);
        background: var(--spec-surface);
    }

    .segmented > .mud-button-root,
    .segmented > a,
    .segmented > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--control-h-sm);
        padding: 5px 11px;
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--weight-regular);
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
        color: var(--color-neutral-700);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color var(--dur-base) var(--ease-standard),
                    color var(--dur-base) var(--ease-standard);
    }

    .segmented--dense > .mud-button-root,
    .segmented--dense > a,
    .segmented--dense > button {
        min-height: 24px;
        padding: 3px 9px;
        font-size: var(--text-xs);
    }

    .segmented > * + * {
        border-left: 1px solid var(--color-divider);
    }

    .segmented > :hover:not(:disabled):not([aria-disabled="true"]) {
        background: var(--wash-ink-7);
        color: var(--spec-ink);
    }

    .segmented > [aria-pressed="true"],
    .segmented > [aria-current="page"],
    .segmented > .is-current {
        background: var(--color-accent);
        color: var(--spec-on-accent);
        font-weight: var(--weight-semibold);
    }

    .segmented > [aria-pressed="true"]:hover,
    .segmented > [aria-current="page"]:hover,
    .segmented > .is-current:hover {
        background: var(--color-accent-600);
        color: var(--spec-on-accent);
    }

    /*
     * A closed option keeps its label and its place — §0 says a refusal is never hidden, and a
     * cell that disappears makes the remaining ones move under the pointer. It is greyed and
     * marked not-allowed; the `title` on the element carries the reason.
     */
    .segmented > [aria-disabled="true"],
    .segmented > :disabled {
        color: var(--color-neutral-500);
        cursor: not-allowed;
    }

    /* ——————————————————————————————————————————————————————
       Page header (the shared component)
       —————————————————————————————————————————————————————— */
    /*
     * The head is a full-bleed band with a rule under it, as the mockup draws it — not a block
     * of text floating in the page gutter. It escapes .page-container with negative margins
     * equal to that container's own padding, which is the only way to bleed to the edge without
     * moving the head out of the page and into the layout.
     */
    .page-header {
        width: auto;
        margin: calc(-1 * var(--gutter-y)) calc(-1 * var(--gutter)) var(--sp-6);
        padding: 22px var(--gutter) 14px;
        border-bottom: 1px solid var(--color-divider);
        scroll-margin-top: var(--sp-8);
    }

    /*
     * Title block and actions. The actions sit on the title's baseline rather than the block's
     * top edge, so a two-line subtitle does not drag the buttons up away from the heading they
     * belong to.
     */
    .page-header__band {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: var(--sp-3);
    }

    .page-header__identity {
        min-width: 0;
    }

    /*
     * The second row inside the band: filters and search on the left, meta pushed right. It is
     * inside the band and above the rule on purpose — a toolbar that floats in the content reads
     * as part of the list rather than as part of the page.
     */
    .page-header__toolbar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        margin-top: 16px;
        min-width: 0;
    }

    .page-header__meta {
        margin-left: auto;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
        white-space: nowrap;
    }

    .page-header__eyebrow {
        display: block;
        font-family: var(--font-heading);
        font-size: var(--text-2xs);
        font-weight: var(--weight-semibold);
        line-height: 1;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
        margin-bottom: 6px;
    }

    .page-header__title {
        font-family: var(--font-heading);
        font-size: var(--text-2xl);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tight);
        text-wrap: pretty;
    }

    /*
     * A desk that already sits under the study header does not need a second 29px title: the
     * mockup uses h2 (29px) for a firm-level page and h3 (22px) for a desk. Keyed off the
     * header's presence rather than a Tone parameter on forty pages.
     */
    .spec-study-head ~ .page-container .page-header__title,
    .page-header__title--console {
        font-size: var(--text-xl);
    }

    .page-header__subtitle {
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
        margin-top: 3px;
    }

    /* The mockup's subtitle line: the sentence, then the state chip that qualifies it. Its own
       class rather than a flex on .page-header__subtitle, so a plain-text subtitle stays a
       plain-text subtitle and keeps wrapping the way prose should. */
    .page-header__state {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        min-width: 0;
    }

    /* ——————————————————————————————————————————————————————
       Empty state
       —————————————————————————————————————————————————————— */
    .empty-state {
        color: var(--color-neutral-700);
        padding: var(--sp-8) var(--sp-4);
        text-align: center;
        border: 1px dashed var(--color-neutral-400);
    }

    .empty-state__icon {
        font-size: var(--sp-8);
        opacity: 0.4;
        margin-bottom: var(--sp-3);
    }

    .empty-state__description {
        max-width: 22rem;
        text-wrap: pretty;
    }

    .empty-state__action {
        margin-top: var(--sp-4);
    }

    /* ——————————————————————————————————————————————————————
       Auth
       —————————————————————————————————————————————————————— */
    .auth-shell {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-bg);
        padding:
            max(var(--sp-8), env(safe-area-inset-top))
            max(var(--sp-4), env(safe-area-inset-right))
            max(var(--sp-8), env(safe-area-inset-bottom))
            max(var(--sp-4), env(safe-area-inset-left));
    }

    .auth-panel {
        width: 100%;
        max-width: 420px;
        background: var(--spec-surface);
        border: 1px solid var(--color-divider);
        padding: var(--sp-8) var(--sp-6);
    }

    .auth-panel-inner {
        width: 100%;
    }

    .auth-brand-eyebrow {
        display: block;
        margin-bottom: var(--sp-6);
        font-family: var(--font-heading);
        font-size: 15px;
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-brand);
        text-transform: uppercase;
        color: var(--spec-ink);
    }

    /* ——————————————————————————————————————————————————————
       Admin summary
       —————————————————————————————————————————————————————— */
    .admin-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: var(--sp-3);
    }

    .admin-summary__cell {
        min-width: 0;
    }

    .admin-summary__label {
        display: block;
        font-family: var(--font-heading);
        font-size: var(--text-2xs);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-700);
        margin-bottom: var(--sp-1);
    }

    .admin-summary__value {
        font-weight: var(--weight-semibold);
    }

    .admin-summary__value--mono {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        word-break: break-all;
    }

    .admin-section-heading {
        font-family: var(--font-heading);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-tight);
    }

    .admin-detail-grid {
        align-items: stretch;
    }

    .feature-key-chip {
        font-family: var(--font-mono);
        font-size: 11px;
    }

    /* ——————————————————————————————————————————————————————
       Portfolio and client desk
       —————————————————————————————————————————————————————— */
    .client-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--sp-4);
    }

    .client-card {
        padding: var(--sp-4);
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
    }

    .client-card__name {
        font-family: var(--font-heading);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-snug);
        overflow-wrap: anywhere;
    }

    .client-card__meta {
        color: var(--color-neutral-700);
        font-size: var(--text-sm);
    }

    .client-card__actions {
        margin-top: auto;
        padding-top: var(--sp-2);
    }

    .client-card__open {
        min-height: var(--control-h-sm);
        touch-action: manipulation;
    }

    .workspace-search {
        max-width: 420px;
    }

    .portfolio-table {
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-surface);
        overflow: hidden;
    }

    .portfolio-table .mud-table-cell {
        vertical-align: middle;
    }

    /* The trailing action column must not wrap: at 768 the label broke over two lines in the
       header and in every one of twenty-four rows. */
    .portfolio-table .mud-table-cell:last-child {
        white-space: nowrap;
    }

    .portfolio-table__name {
        display: block;
        max-width: 22rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: var(--weight-semibold);
        color: var(--spec-ink);
        transition: color var(--dur-fast) var(--ease-standard);
    }

    .portfolio-table__name:hover,
    .portfolio-table__name:focus-visible {
        color: var(--color-accent-700);
    }

    .client-home {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
    }

    .client-home__facts {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-1) var(--sp-4);
        color: var(--color-neutral-700);
        font-size: var(--text-sm);
    }

    .client-home__picker {
        max-width: 28rem;
    }

    .client-home__empty {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-3) var(--sp-4);
    }

    .client-home__empty p,
    .client-home__empty-copy {
        margin: 0;
        color: var(--spec-ink);
    }

    .client-home__desk {
        border: 1px solid var(--color-divider);
    }

    .client-home__studies {
        margin-top: var(--sp-4);
    }

    .client-study-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-4);
        padding: var(--sp-3) var(--sp-4);
        border: 1px solid var(--color-divider);
        background: var(--spec-surface);
        transition: border-color var(--dur-base) var(--ease-standard);
    }

    .client-study-row:hover {
        border-color: var(--color-neutral-400);
    }

    .client-study-row__facts {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    @media (max-width: 599.95px) {
        .client-study-row {
            flex-wrap: wrap;
            gap: var(--sp-2);
        }
    }

    /* ——————————————————————————————————————————————————————
       Ledger and isozygio
       —————————————————————————————————————————————————————— */
    .isozygio-level-filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-3);
        min-width: 0;
    }

    .isozygio-level-filter__label {
        font-size: var(--text-xs);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    /* Border, hover and the selected cell all come from .segmented. What is left is only what a
       level cell needs on top: a square minimum so "Α" is as wide as "Α+Β+Γ". */
    .isozygio-level-filter__link {
        justify-content: center;
        min-width: var(--control-h-sm);
    }

    button.isozygio-level-filter__link {
        font: inherit;
    }

    .isozygio-totals-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--sp-2) var(--sp-4);
        min-width: 0;
        margin-bottom: var(--sp-2);
        color: var(--color-neutral-700);
        font-size: var(--text-sm);
        font-family: var(--font-mono);
    }

    .isozygio-totals-bar__difference.is-imbalanced {
        color: var(--stop);
        font-weight: var(--weight-semibold);
    }

    .ledger-money-grid__row--parent td,
    .ledger-money-grid__row--parent .mud-table-cell {
        font-weight: var(--weight-semibold);
    }

    .desk-amount--out-of-tolerance {
        color: var(--stop);
        font-weight: var(--weight-semibold);
    }

    .finding-row:last-child {
        border-bottom: none;
    }

    .account-lookup {
        min-width: 0;
        max-width: 100%;
    }

    .account-lookup--code,
    .account-lookup--code .account-lookup__field,
    .account-lookup--code .mud-input-control,
    .account-lookup--code .mud-input {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .account-lookup__option {
        display: flex;
        gap: var(--sp-2);
        min-width: 0;
    }

    .account-lookup__option-code {
        flex: 0 0 auto;
        font-family: var(--font-mono);
    }

    .account-lookup__option-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ——————————————————————————————————————————————————————
       Desk toolbar
       —————————————————————————————————————————————————————— */
    .desk-toolbar,
    .mud-card-content > .mud-grid.align-items-end,
    .mud-card-content > .mud-grid:has(.project-selector, .ops-study-select):has(.mud-button-root) {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .desk-toolbar > :has(.project-selector, .ops-study-select) {
        flex-grow: 0;
        flex-basis: var(--spec-study-select-max-width);
        max-width: var(--spec-study-select-max-width);
        width: 100%;
        min-width: 0;
    }

    .desk-toolbar__grow {
        flex: 1 1 14rem;
        min-width: 12rem;
    }

    .desk-toolbar__code {
        flex: 0 1 11rem;
        width: 11rem;
        min-width: 9rem;
    }

    .desk-toolbar .mud-input > input.mud-input-root-outlined,
    .desk-toolbar textarea.mud-input-slot,
    .desk-toolbar textarea.mud-input-root-outlined {
        min-height: var(--control-h);
        height: var(--control-h);
        resize: none;
        overflow: hidden;
        line-height: calc(var(--control-h) - 2px);
    }

    .desk-toolbar .mud-input-control,
    .mud-card-content > .mud-grid.align-items-end .mud-input-control,
    .mud-card-content > .mud-grid:has(.project-selector, .ops-study-select):has(.mud-button-root) .mud-input-control {
        margin-top: var(--sp-2);
        margin-bottom: var(--sp-1);
    }

    @media (min-width: 600px) {
        .desk-toolbar > .mud-grid-item,
        .mud-card-content > .mud-grid.align-items-end > .mud-grid-item,
        .mud-card-content > .mud-grid:has(.project-selector, .ops-study-select):has(.mud-button-root) > .mud-grid-item {
            flex-grow: 0;
            flex-basis: auto;
            max-width: none;
            width: auto;
            min-width: 0;
        }

        .desk-toolbar > .mud-grid-item:has(.project-selector, .ops-study-select),
        .mud-card-content > .mud-grid.align-items-end > .mud-grid-item:has(.project-selector, .ops-study-select),
        .mud-card-content > .mud-grid:has(.project-selector, .ops-study-select):has(.mud-button-root) > .mud-grid-item:has(.project-selector, .ops-study-select) {
            flex: 0 1 var(--spec-study-select-max-width);
            max-width: var(--spec-study-select-max-width);
        }
    }

    .project-selector,
    .ops-study-select {
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
        width: 100%;
        max-width: var(--spec-study-select-max-width);
        min-width: 0;
    }

    .ops-study-select__label {
        color: var(--spec-ink);
        font-size: 12px;
    }

    .project-selector .mud-input-control,
    .ops-study-select .mud-input-control {
        max-width: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }

    #main-content .mud-input-control {
        margin-top: var(--sp-1);
        margin-bottom: var(--sp-1);
    }

    #main-content .mud-input-control.mud-input-outlined-with-label {
        margin-top: var(--sp-2);
        margin-bottom: var(--sp-1);
    }

    /* ——————————————————————————————————————————————————————
       MudBlazor tabs

       Kept for the pages that use them inside a desk. The bar is .mud-tabs-tabbar (not
       -toolbar), and the active panel is display:contents, so padding on the panel is
       discarded and margin on the bar is the only spacing that survives.
       —————————————————————————————————————————————————————— */
    #main-content .mud-tabs-tabbar {
        margin-bottom: var(--sp-4);
        border-bottom: 1px solid var(--color-divider);
        background: transparent;
    }

    #main-content .mud-tabs-tabbar .mud-tabs-tabbar-inner {
        min-height: var(--control-h);
    }

    #main-content .mud-tab {
        width: auto;
        min-width: 0;
        min-height: var(--control-h);
        padding: var(--sp-2) var(--sp-3);
        font-family: var(--font-heading);
        font-size: 12px;
        font-weight: var(--weight-semibold);
        line-height: 1.25;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
        color: var(--color-neutral-700);
    }

    #main-content .mud-tab.mud-tab-active {
        color: var(--color-accent-900);
    }

    #main-content .mud-tabs .mud-tab-slider {
        background: var(--color-accent);
    }

    #main-content .mud-tab .mud-tab-icon-text {
        font-size: 1rem;
        width: 1rem;
        height: 1rem;
    }

    #main-content .mud-tab .mud-tab-badge.mud-badge-root {
        display: inline-flex;
        align-items: center;
        position: static;
        width: auto;
        height: auto;
        margin-inline-start: var(--sp-1);
    }

    #main-content .mud-tab .mud-tab-badge .mud-badge-wrapper {
        position: static;
        width: auto;
        height: auto;
        pointer-events: auto;
    }

    /* 10px, not the 9.5px of a tracked uppercase kicker: mono digits have no ascenders to read
       by and a count is a figure, so it needs the half pixel back. */
    #main-content .mud-tab .mud-tab-badge .mud-badge {
        position: static;
        inset: auto;
        font-family: var(--font-mono);
        font-size: 10px;
        font-variant-numeric: tabular-nums;
    }

    #main-content .mud-grid.align-items-end > .mud-grid-item {
        display: flex;
        align-items: flex-end;
        min-width: 0;
    }

    #main-content .mud-grid.align-items-end > .mud-grid-item .mud-input-control {
        margin-bottom: 0;
    }

    #main-content .mud-grid.align-items-end .mud-button-root,
    #main-content .mud-grid .d-flex.align-end .mud-button-root,
    #main-content .mud-grid .d-flex.gap-2 .mud-button-root,
    #main-content .desk-toolbar .mud-button-root {
        height: var(--control-h);
        min-height: var(--control-h);
        box-sizing: border-box;
    }

    /* ——————————————————————————————————————————————————————
       File upload field
       —————————————————————————————————————————————————————— */
    .file-upload-field {
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
        min-width: 0;
        width: 100%;
    }

    .file-upload-field__label {
        color: var(--spec-ink);
        font-size: 12px;
    }

    .file-upload-field__hint {
        color: var(--color-neutral-700);
        font-size: 11px;
    }

    .file-upload-field__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-2);
        min-width: 0;
    }

    .file-upload-field__picker {
        position: relative;
        display: inline-flex;
        margin: 0;
        cursor: pointer;
        touch-action: manipulation;
    }

    .file-upload-field__picker.is-disabled {
        cursor: not-allowed;
        pointer-events: none;
    }

    .file-upload-field__input {
        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;
    }

    .file-upload-field__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--control-h-sm);
        padding: 6px 11px;
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-surface);
        color: var(--spec-ink);
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        line-height: 1.2;
        cursor: pointer;
        transition: background-color var(--dur-base) var(--ease-standard);
    }

    .file-upload-field__picker:hover:not(.is-disabled) .file-upload-field__button {
        background: var(--wash-ink-7);
    }

    .file-upload-field__picker:focus-within .file-upload-field__button {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 2px;
    }

    /* Colour, not opacity (§3.8): a faded label is the one thing the reader needs in order to
       work out what they cannot do. */
    .file-upload-field__picker.is-disabled .file-upload-field__button {
        color: var(--color-neutral-500);
        background: var(--color-neutral-200);
        border-color: var(--color-neutral-400);
        cursor: not-allowed;
    }

    .file-upload-field__chip,
    .file-upload-field__empty {
        min-width: 0;
        max-width: 16rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-upload-field__chip {
        display: inline-flex;
        align-items: center;
        min-height: var(--control-h-sm);
        padding: 3px 10px;
        border: 1px solid var(--color-accent-300);
        background: var(--color-accent-100);
        color: var(--color-accent-800);
        font-size: 11px;
        font-family: var(--font-mono);
    }

    .file-upload-field__empty {
        color: var(--color-neutral-700);
        font-size: var(--text-sm);
    }

    /* ——————————————————————————————————————————————————————
       Report desk
       —————————————————————————————————————————————————————— */
    .report-desk {
        display: grid;
        grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
        gap: var(--sp-4);
        align-items: start;
    }

    @media (max-width: 959.95px) {
        .report-desk {
            grid-template-columns: minmax(0, 1fr);
        }

        /* On a tablet the catalogue is a chooser above the sheet, not a column beside it.
           Capping it keeps the preview — the thing being chosen — on screen. */
        .report-catalog {
            max-height: 22rem;
            overflow-y: auto;
            overscroll-behavior-y: contain;
        }
    }

    .report-catalog {
        min-width: 0;
        border: 1px solid var(--color-divider);
        background: var(--spec-surface);
        overflow: hidden;
    }

    .report-catalog__group + .report-catalog__group {
        border-top: 1px solid var(--color-divider);
    }

    .report-catalog__title {
        margin: 0;
        padding: var(--sp-2) var(--sp-3) var(--sp-1);
        font-family: var(--font-heading);
        font-size: var(--text-2xs);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .report-catalog__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .report-catalog__item {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: var(--tap-target);
        padding: var(--sp-2) var(--sp-3);
        border: 0;
        border-top: 1px solid var(--color-divider);
        border-left: 3px solid transparent;
        background: transparent;
        color: var(--spec-ink);
        font: inherit;
        text-align: left;
        cursor: pointer;
        touch-action: manipulation;
        transition: background-color var(--dur-fast) var(--ease-standard);
    }

    .report-catalog__item:hover:not(:disabled) {
        background: var(--wash-ink-4);
    }

    .report-catalog__item.is-selected {
        background: var(--color-accent-100);
        border-left-color: var(--color-accent);
        color: var(--color-accent-900);
    }

    .report-catalog__item:disabled {
        cursor: not-allowed;
        color: var(--color-neutral-500);
    }

    .report-catalog__name {
        display: block;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .report-catalog__reason {
        display: block;
        margin-top: var(--sp-1);
        color: var(--color-neutral-700);
        font-size: 11px;
        text-wrap: pretty;
    }

    .report-preview {
        min-width: 0;
    }

    .report-preview__sheet {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .report-preview__grid.mud-table-dense .mud-table-row,
    .report-preview__grid .mud-table-row {
        height: auto;
    }

    .report-preview__grid.mud-table-dense .mud-table-cell,
    .report-preview__grid .mud-table-cell {
        height: auto;
        min-height: 2rem;
        padding-top: var(--sp-1);
        padding-bottom: var(--sp-1);
        vertical-align: top;
        white-space: normal;
        overflow: visible;
        line-height: var(--leading-snug);
    }

    .report-preview__cell--number {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .report-preview__cell--label {
        display: block;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .report-preview__cell--section {
        font-weight: var(--weight-semibold);
    }

    /* BR-058: a ratio that cannot be computed says so where its figure would have been. Muted
       and italic so a column of figures still scans as figures, and the sentence reads as an
       explanation rather than as a value. */
    .report-preview__cell--not-computable {
        display: block;
        font-style: italic;
        color: var(--color-neutral-600);
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* ——————————————————————————————————————————————————————
       Γραφικά — charts

       Marks follow the data-viz specs: 2px strokes, >=8px markers (r 4.5 plus a 2px surface
       ring so crossing lines stay separable), recessive grid and axis, text in ink tokens
       rather than the series colour.
       —————————————————————————————————————————————————————— */
    .finan-chart {
        margin: 0;
    }

    .finan-chart__caption {
        margin-bottom: var(--sp-2);
    }

    .finan-chart__plot {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .finan-chart__grid {
        stroke: var(--color-neutral-300);
        stroke-width: 1;
        opacity: 0.75;
    }

    .finan-chart__axis {
        stroke: var(--color-neutral-400);
        stroke-width: 1;
    }

    .finan-chart__line {
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .finan-chart__marker {
        stroke: var(--spec-surface);
        stroke-width: 2;
    }

    .finan-chart__series-label,
    .finan-chart__tick {
        font-family: var(--font-mono);
        font-size: 10px;
        fill: var(--color-neutral-600);
    }

    .finan-chart__series-label {
        dominant-baseline: middle;
    }

    .finan-chart__legend {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-1) var(--sp-4);
        list-style: none;
        margin: var(--sp-2) 0 0;
        padding: 0;
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    .finan-chart__legend li {
        display: flex;
        align-items: center;
        gap: var(--sp-1);
    }

    .finan-chart__swatch {
        width: 10px;
        height: 10px;
        display: inline-block;
    }

    .finan-chart__table {
        margin-top: var(--sp-3);
        font-size: var(--text-sm);
    }

    .finan-chart__table summary {
        cursor: pointer;
        color: var(--color-neutral-700);
    }

    /* ——————————————————————————————————————————————————————
       Dirty state

       §3.4: a field the accountant changed and has not saved is marked, so a save is never a
       guess about what is in the request. The mark is a fill and a border, not a colour on the
       text — the figure has to stay black to be read as a figure.
       —————————————————————————————————————————————————————— */
    #main-content .mud-input-control.is-dirty .mud-input-outlined-border,
    #main-content .mud-input.is-dirty .mud-input-outlined-border {
        border-color: var(--color-accent-500);
    }

    #main-content .is-dirty .mud-input,
    #main-content .mud-input.is-dirty {
        background: var(--color-accent-100);
    }

    /* Controls a page renders itself, outside a MudBlazor wrapper. */
    input.is-dirty,
    select.is-dirty,
    textarea.is-dirty {
        border-color: var(--color-accent-500);
        background: var(--color-accent-100);
    }

    /*
     * A grid whose cell is the field: the wrapper carries the mark so the whole cell reads as
     * changed rather than only the 8rem box inside it.
     */
    td.is-dirty,
    #main-content .mud-table-body .mud-table-cell.is-dirty {
        background: var(--color-accent-100);
        box-shadow: inset 2px 0 0 var(--color-accent-500);
    }

    /*
     * An optional 2px rail down the left of a changed block — a whole row of slots, a fieldset —
     * where a per-input fill would be noise.
     */
    .spec-field-mark {
        border-left: 2px solid var(--color-accent-500);
        padding-left: 7px;
    }

    /* ——————————————————————————————————————————————————————
       Save state chip

       The mockup's 10.5px mono chip beside a desk title: the state on a tint with a hairline in
       the same role. Saved is ok, unsaved is warn, saving is neutral — it is a fact in progress,
       not a verdict.
       —————————————————————————————————————————————————————— */
    .spec-save-state {
        display: inline-block;
        font: var(--weight-regular) var(--text-xs) / 1 var(--font-mono);
        padding: 3px 7px;
        white-space: nowrap;
        border: 1px solid var(--color-neutral-400);
        background: var(--color-neutral-100);
        color: var(--color-neutral-800);
    }

    .spec-save-state--saved {
        border-color: var(--ok-b);
        background: var(--ok-t);
        color: var(--ok);
    }

    .spec-save-state--unsaved {
        border-color: var(--warn-b);
        background: var(--warn-t);
        color: var(--warn);
    }

    .spec-save-state__at {
        color: inherit;
        opacity: 0.85;
    }

    /* ——————————————————————————————————————————————————————
       SpecCheck — the mockup's square flag

       A 15px box, a 12px label and a 10.5px note under it saying what turning the flag on does.
       A button rather than an input, so the label and the note are part of the hit area.
       —————————————————————————————————————————————————————— */
    .spec-check {
        display: inline-flex;
        align-items: flex-start;
        gap: 9px;
        padding: 4px 0;
        margin: 0;
        background: none;
        border: 0;
        text-align: left;
        font: inherit;
        color: inherit;
        cursor: pointer;
    }

    .spec-check__box {
        flex: none;
        width: 15px;
        height: 15px;
        margin-top: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-field);
        color: var(--spec-on-accent);
        font: var(--weight-semibold) 10px / 1 var(--font-body);
        transition: background-color var(--dur-base) var(--ease-standard),
                    border-color var(--dur-base) var(--ease-standard);
    }

    .spec-check[aria-checked="true"] .spec-check__box {
        background: var(--color-accent);
        border-color: var(--color-accent-700);
    }

    .spec-check__text {
        min-width: 0;
    }

    .spec-check__label {
        display: block;
        font-size: 12px;
        line-height: var(--leading-snug);
        color: var(--spec-ink);
    }

    .spec-check__note {
        display: block;
        margin-top: 1px;
        font-size: var(--text-xs);
        line-height: var(--leading-snug);
        color: var(--color-neutral-700);
    }

    /* Closed, not gone: the label and the note stay, said in colour rather than opacity (§3.8). */
    .spec-check--disabled {
        cursor: not-allowed;
    }

    .spec-check--disabled .spec-check__box {
        border-color: var(--color-divider);
        background: var(--color-neutral-100);
    }

    .spec-check--disabled .spec-check__label {
        color: var(--color-neutral-500);
    }

    .spec-check:hover:not(.spec-check--disabled) .spec-check__box {
        border-color: var(--color-accent-600);
    }

    /* ——————————————————————————————————————————————————————
       SpecHint and tooltips

       A 14px circled «i» that opens a square neutral-900 tooltip. §3.6: the tooltip adds help; it
       never carries the only copy of a reason.
       —————————————————————————————————————————————————————— */
    .spec-hint {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        flex: none;
        border: 1px solid var(--color-neutral-500);
        border-radius: 50%;
        font: var(--weight-semibold) 9.5px / 1 var(--font-heading);
        font-style: italic;
        color: var(--color-neutral-700);
        background: transparent;
        cursor: help;
        vertical-align: middle;
        user-select: none;
    }

    .spec-hint:hover,
    .spec-hint:focus-visible {
        border-color: var(--color-accent-600);
        color: var(--color-accent-800);
    }

    .spec-hint__root {
        display: inline-flex;
        vertical-align: middle;
    }

    /* Global: every MudTooltip in the app takes the blueprint's square dark panel. */
    .mud-tooltip {
        border-radius: 0;
        padding: 6px 9px;
        max-width: 280px;
        background-color: var(--color-neutral-900);
        color: var(--spec-on-dark);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--weight-regular);
        line-height: var(--leading-snug);
        text-align: left;
        text-wrap: pretty;
        box-shadow: var(--shadow-md);
    }

    .mud-tooltip.mud-tooltip-default {
        background-color: var(--color-neutral-900);
        color: var(--spec-on-dark);
    }

    /* No arrow: the blueprint has no pointed shapes. */
    .mud-tooltip.mud-tooltip-arrow::after {
        display: none;
    }

    /* ——————————————————————————————————————————————————————
       MudBlazor toggles — checkbox, radio, switch

       All three render their glyph inside a `.mud-button-root.mud-icon-button`, so the blueprint's
       button rule at the top of this file was painting a 28px white bordered square around every
       tick and squaring off the switch's thumb: the switch showed a white box sliding on a grey
       rail, and the checkbox a bordered box inside a bordered box. The fix is to give the glyph
       container back its transparency and its own geometry, and then draw the blueprint's square
       over MudBlazor's SVG.

       Pages that can be rewritten should use SpecCheck and SpecSegmented instead (§3.5). This
       section is for the ones that have not been yet, so none of them is the odd Material control
       out in the meantime.
       —————————————————————————————————————————————————————— */
    #main-content .mud-checkbox .mud-button-root,
    #main-content .mud-radio .mud-button-root,
    #main-content .mud-switch .mud-button-root {
        min-width: 0;
        min-height: 0;
        width: auto;
        height: auto;
        margin: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #main-content .mud-checkbox .mud-button-root:hover,
    #main-content .mud-radio .mud-button-root:hover,
    #main-content .mud-switch .mud-button-root:hover {
        background: transparent;
    }

    /* The 42px ripple square around a 15px idea. */
    #main-content .mud-checkbox .mud-icon-button,
    #main-content .mud-radio .mud-icon-button {
        padding: 3px;
    }

    #main-content .mud-checkbox .mud-icon-root,
    #main-content .mud-radio .mud-icon-root {
        width: 15px;
        height: 15px;
        font-size: 15px;
    }

    /*
     * The label. MudBlazor spaces it with the ripple box's own padding, which the reset above
     * removed — so it needs its own gap, on whichever side the control puts it.
     */
    #main-content .mud-checkbox .mud-typography,
    #main-content .mud-radio .mud-typography,
    #main-content .mud-switch .mud-typography {
        font-family: var(--font-body);
        font-size: var(--text-base);
        line-height: var(--leading-snug);
        color: var(--spec-ink);
        margin-inline-start: 7px;
    }

    #main-content .mud-input-content-placement-start .mud-typography {
        margin-inline-start: 0;
        margin-inline-end: 7px;
    }

    /*
     * The checkbox glyph. MudBlazor draws a Material SVG; the blueprint wants the same 15px square
     * SpecCheck draws. The SVG is hidden and the square is drawn on the span that held it, so the
     * input, the label association and the keyboard all stay MudBlazor's.
     */
    #main-content .mud-checkbox .mud-icon-button {
        position: relative;
    }

    #main-content .mud-checkbox .mud-icon-button .mud-icon-root {
        visibility: hidden;
    }

    #main-content .mud-checkbox .mud-icon-button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 15px;
        height: 15px;
        transform: translate(-50%, -50%);
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-field);
    }

    /*
     * `mud-checkbox-true`, not `mud-checked`: MudBlazor spells a checkbox's state as a
     * true/false/null suffix on the glyph span, because the checkbox is tri-state and the radio
     * is not. Only the radio wears `mud-checked` — selecting that here drew an empty box on a
     * ticked checkbox.
     */
    #main-content .mud-checkbox .mud-icon-button.mud-checkbox-true::after {
        border-color: var(--color-accent-700);
        background: var(--color-accent)
            no-repeat center / 9px 9px
            url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4 4.4 9.3 10.5 3.2' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
    }

    #main-content .mud-checkbox.mud-disabled .mud-icon-button::after {
        border-color: var(--color-divider);
        background: var(--color-neutral-100);
    }

    #main-content .mud-checkbox.mud-disabled .mud-typography,
    #main-content .mud-radio.mud-disabled .mud-typography,
    #main-content .mud-switch.mud-disabled .mud-typography {
        color: var(--color-neutral-500);
    }

    /*
     * The switch. The mockup has no rounded Material track, so this is a 30x16 square rail with a
     * 12px square thumb — the same shape language as everything else, at the size the desk uses.
     * `.mud-switch-base` is positioned by MudBlazor with a padding the button reset above removed,
     * so the offsets are restated here rather than inherited.
     */
    #main-content .mud-switch .mud-switch-span {
        width: 30px;
        height: 16px;
        padding: 2px;
        flex: none;
        align-items: center;
        overflow: visible;
    }

    /* The rail fills the span's content box — 26px inside the 30px control, because the 2px inset
       is what gives the thumb somewhere to sit at each end. */
    #main-content .mud-switch .mud-switch-track {
        width: 100%;
        height: 16px;
        border-radius: 0;
        opacity: 1;
        background: var(--color-neutral-300);
        border: 1px solid var(--color-neutral-400);
        transition: background-color var(--dur-base) var(--ease-standard),
                    border-color var(--dur-base) var(--ease-standard);
    }

    #main-content .mud-switch .mud-switch-base {
        top: 2px;
        left: 2px;
        padding: 0;
        color: var(--spec-surface);
        transform: none;
    }

    #main-content .mud-switch .mud-switch-base.mud-checked {
        transform: translateX(14px);
    }

    #main-content .mud-switch .mud-switch-base.mud-checked + .mud-switch-track {
        opacity: 1;
        background: var(--color-accent);
        border-color: var(--color-accent-700);
    }

    /*
     * The thumb is painted white in both states rather than from `currentColor`: MudBlazor puts
     * the colour class on the checked base with !important, so a currentColor thumb turned the
     * same accent as the track it sits on and vanished the moment the switch was on.
     */
    #main-content .mud-switch [class*="mud-switch-thumb"] {
        width: 12px;
        height: 12px;
        border-radius: 0;
        box-shadow: none;
        background-color: var(--spec-surface);
        border: 1px solid var(--color-neutral-500);
    }

    #main-content .mud-switch .mud-checked [class*="mud-switch-thumb"] {
        background-color: var(--spec-surface);
        border-color: var(--color-accent-800);
    }

    #main-content .mud-switch.mud-disabled .mud-switch-track {
        background: var(--color-neutral-200);
        border-color: var(--color-neutral-300);
        opacity: 1;
    }

    /* The radio keeps its circle — a radio drawn as a checkbox says the wrong thing about how
       many answers there are — but loses the 42px box and takes the accent. */
    #main-content .mud-radio .mud-icon-button {
        color: var(--color-neutral-500);
    }

    #main-content .mud-radio .mud-icon-button.mud-checked,
    #main-content .mud-radio .mud-checked .mud-icon-button {
        color: var(--color-accent);
    }

    /* ——————————————————————————————————————————————————————
       Scroll-inside regions

       §3.2: a long list never scrolls the page. The table's own container gets the height and the
       scrollbar; the header sticks to the top of it and the totals row to the bottom.

       The height is a custom property rather than a number, so a page whose chrome above is taller
       than the default only has to say `--spec-fill-offset: 380px` on its wrapper.

       MudBlazor's FixedHeader writes an inline `height` on the container only when the `Height`
       parameter is set, so both spellings work: without `Height` the max-height below is the whole
       constraint; with it the inline height wins and the sticky rows still behave.
       —————————————————————————————————————————————————————— */
    #main-content .spec-fill .mud-table-container,
    .spec-fill-region {
        max-height: var(--spec-fill-h, calc(100vh - var(--spec-fill-offset, 300px)));
        overflow: auto;
        overscroll-behavior: contain;
    }

    #main-content .spec-fill .mud-table-head .mud-table-cell,
    .spec-fill-region thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--spec-surface);
    }

    /* The ledger's dark header bar survives the sticky treatment: a transparent sticky header
       shows the rows sliding under it. */
    #main-content .spec-fill.ledger-grid .mud-table-head .mud-table-cell,
    .spec-fill-region.ledger-grid thead th {
        background: var(--color-accent-900);
    }

    #main-content .spec-fill .mud-table-foot .mud-table-cell,
    .spec-fill-region tfoot td,
    .spec-fill-region tfoot th {
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: var(--color-neutral-200);
    }

    /* The table frame itself must not scroll — only the container inside it does. */
    #main-content .mud-table.spec-fill {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* ——————————————————————————————————————————————————————
       Loading skeletons

       §3.7: the shape of the table that is coming, not a centred spinner. Bars are neutral-200 on
       26px rows, and the first is narrower because a code column always is.
       —————————————————————————————————————————————————————— */
    .spec-skeleton {
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-surface);
        padding: 8px;
    }

    .spec-skeleton__row {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        height: 26px;
    }

    .spec-skeleton__row + .spec-skeleton__row {
        border-top: 1px solid var(--color-divider);
    }

    .spec-skeleton__bar {
        flex: 1 1 0;
        height: 9px;
        background: var(--color-neutral-200);
    }

    .spec-skeleton__bar:first-child {
        flex: 0 0 64px;
    }

    /* ——————————————————————————————————————————————————————
       Dialogs

       Square, one hairline, a 15px heading and a 9px action row — the same object as a card, put
       over the page rather than in it.
       —————————————————————————————————————————————————————— */
    .mud-dialog {
        border: 1px solid var(--color-divider);
        background: var(--spec-surface);
        box-shadow: var(--shadow-lg);
        color: var(--spec-ink);
    }

    .mud-dialog .mud-dialog-title {
        padding: 14px 18px 10px;
        border-radius: 0;
        font-family: var(--font-heading);
        font-size: var(--text-md);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tight);
        color: var(--spec-ink);
    }

    .mud-dialog .mud-dialog-title .mud-typography {
        font: inherit;
        letter-spacing: inherit;
    }

    .mud-dialog .mud-dialog-content {
        padding: 0 18px 14px;
        border-radius: 0;
        font-size: var(--text-base);
        line-height: var(--leading-normal);
    }

    .mud-dialog .mud-dialog-actions {
        gap: 9px;
        padding: 12px 18px;
        border-top: 1px solid var(--color-divider);
        border-radius: 0;
    }

    /* The dialog is outside #main-content, so the buttons need the blueprint restated. */
    .mud-dialog .mud-dialog-actions .mud-button-root {
        font-family: var(--font-heading);
        font-weight: var(--weight-semibold);
        font-size: var(--text-sm);
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
        min-height: var(--control-h-sm);
        padding: 6px 11px;
        border: 1px solid var(--color-neutral-400);
        border-radius: 0;
        background: var(--spec-surface);
        color: var(--spec-ink);
        box-shadow: none;
    }

    .mud-dialog .mud-dialog-actions .mud-button-filled.mud-button-filled-primary {
        background: var(--color-accent);
        border-color: var(--color-accent-700);
        color: var(--spec-on-accent);
    }

    .mud-dialog .mud-dialog-actions .mud-button-root.mud-button-outlined-error {
        color: var(--stop);
        border-color: var(--stop-b);
        background: var(--spec-surface);
    }

    .spec-dialog__body {
        margin: 0;
        max-width: 42ch;
        text-wrap: pretty;
    }

    /* ——————————————————————————————————————————————————————
       Snackbar

       The toast is the note's shape moved to the corner: square, a 3px bar in the role's colour
       and the role's tint behind it — so a confirmation looks like the banner it would have been
       had it stayed on the page.
       —————————————————————————————————————————————————————— */
    .mud-snackbar {
        border-radius: 0;
        border: 1px solid var(--tone-line, var(--color-divider));
        border-left: 3px solid var(--tone, var(--color-neutral-500));
        background: var(--tone-tint, var(--color-neutral-100));
        color: var(--spec-ink);
        font-family: var(--font-body);
        font-size: 12px;
        line-height: var(--leading-snug);
        box-shadow: var(--shadow-md);
        padding: 9px 12px;
    }

    .mud-snackbar.mud-alert-text-success,
    .mud-snackbar.mud-alert-filled-success,
    .mud-snackbar.mud-alert-outlined-success {
        --tone: var(--ok);
        --tone-tint: var(--ok-t);
        --tone-line: var(--ok-b);
    }

    .mud-snackbar.mud-alert-text-warning,
    .mud-snackbar.mud-alert-filled-warning,
    .mud-snackbar.mud-alert-outlined-warning {
        --tone: var(--warn);
        --tone-tint: var(--warn-t);
        --tone-line: var(--warn-b);
    }

    .mud-snackbar.mud-alert-text-error,
    .mud-snackbar.mud-alert-filled-error,
    .mud-snackbar.mud-alert-outlined-error {
        --tone: var(--stop);
        --tone-tint: var(--stop-t);
        --tone-line: var(--stop-b);
    }

    .mud-snackbar.mud-alert-text-info,
    .mud-snackbar.mud-alert-filled-info,
    .mud-snackbar.mud-alert-outlined-info {
        --tone: var(--color-accent);
        --tone-tint: var(--color-accent-100);
        --tone-line: var(--color-accent-300);
    }

    .mud-snackbar .mud-snackbar-content-message {
        padding: 0;
    }

    .mud-snackbar .mud-snackbar-icon {
        color: var(--tone, var(--color-neutral-700));
        opacity: 1;
        font-size: 18px;
        padding: 0;
        margin-inline-end: 9px;
    }
}