/*
 * Ark → MudBlazor mapping: the ARKSOFT admin (React + Tailwind + shadcn) and this MudBlazor app already
 * share the token layer (ark-tokens.css), so this sheet closes the remaining gap — geometry and type — by
 * restating each Tailwind component's utilities as a rule against the MudBlazor class rendering the same
 * thing, with the Tailwind class named in each rule's comment so upstream changes can be traced.
 * Upstream files (arksoft-platform/clients/admin/src/components/): ui/button.tsx → .mud-button/.mud-icon-button,
 * ui/card.tsx → .mud-paper, ui/input.tsx → .mud-input/.mud-input-control, ui/label.tsx → .mud-input-label,
 * ui/select.tsx → .mud-select/.mud-list/.mud-popover, ui/switch.tsx → .mud-switch, ui/badge.tsx → .mud-chip,
 * ui/table.tsx → .mud-table, ui/dialog.tsx → .mud-dialog/.mud-overlay, layout/sidebar.tsx → .mud-navmenu/.mud-nav-link,
 * layout/topbar.tsx → .mud-appbar.
 * Verified pixel numbers (against the platform's compiled bundle): rounded-sm 8px · rounded-md 12px ·
 * rounded-lg 18px · rounded-xl 24px · text-xs 12px · text-sm 14px · text-base 16px · text-lg 18px ·
 * h-7 28px · h-8 32px · h-9 36px · h-10 40px · h-11 44px.
 * MUST load after MudBlazor.min.css: MudBlazor writes rules like
 * `.mud-input>input.mud-input-root-outlined.mud-input-root-margin-dense`, so some blocks below match that
 * specificity to win rather than use !important; where !important is used, it's because MudBlazor used it first.
 */

:root {
    /* One control height for every interactive primitive: h-9 — buttons, fields, selects and icon buttons all sit on it, so a filter row lines up without per-component nudging. */
    --ark-control-h: 2.25rem; /* h-9  · 36px */
    --ark-control-h-sm: 2rem; /* h-8  · 32px */
    --ark-control-h-lg: 2.5rem; /* h-10 · 40px */

    /* The 3px brand-tinted focus ring the platform's button and input share — distinct from ark-base.css's `:focus-visible` outline, the keyboard-only indicator on everything else. */
    --ark-focus-ring: 0 0 0 3px oklch(from var(--ring) l c h / 0.5);
}

/* BUTTON ← ui/button.tsx. Base: h-9 px-4 gap-2 rounded-md text-sm font-medium tracking-tight, active:scale-[0.98], disabled:opacity-50.
   MudBlazor ships Material geometry instead: a 64px min-width, a 4px radius from the old default, and an elevation shadow on the filled variant — all three are replaced below. */

.mud-button-root.mud-button {
    /* h-9 px-4 · box-sizing so the outlined variant's border does not make it taller than the filled one. */
    min-height: var(--ark-control-h);
    padding: 0 1rem;
    box-sizing: border-box;

    /* rounded-md */
    border-radius: var(--radius-md);

    /* text-sm font-medium tracking-tight, and no Material uppercase. */
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    text-transform: none;

    /* `shrink-0` plus no min-width: the platform sizes a button to its label, so a two-letter action is not padded out to 64px. */
    min-width: 0;
    flex-shrink: 0;

    /* transition-all duration-[--duration-fast] ease-[--ease-out-cubic] */
    transition: background-color var(--duration-fast) var(--ease-out-cubic),
                border-color var(--duration-fast) var(--ease-out-cubic),
                box-shadow var(--duration-fast) var(--ease-out-cubic),
                color var(--duration-fast) var(--ease-out-cubic),
                filter var(--duration-fast) var(--ease-out-cubic),
                transform var(--duration-fast) var(--ease-out-cubic);
}

/* gap-2 between the icon and the label — MudBlazor spaces its start/end icons with margins on the icon instead, which double up against a flex gap. */
.mud-button-root.mud-button .mud-button-label {
    gap: 0.5rem;
}

.mud-button-root.mud-button .mud-button-label > .mud-icon-root {
    margin: 0;
}

/* [&_svg:not([class*='size-'])]:size-4 */
.mud-button-root.mud-button .mud-button-label > .mud-icon-root {
    font-size: 1rem;
}

/* active:scale-[0.98] — the whole affordance the platform uses in place of a Material ripple. */
.mud-button-root.mud-button:active:not(:disabled) {
    transform: scale(0.98);
}

/* disabled:opacity-50 disabled:pointer-events-none */
.mud-button-root.mud-button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* variant: default — bg-primary text-primary-foreground, hover:brightness-[1.05] plus a soft brand-coloured glow.
   Notably NOT a Material elevation shadow: the glow is tinted with the button's own colour, which is what keeps a row of buttons from looking like it is floating off the page. */
.mud-button-root.mud-button.mud-button-filled {
    box-shadow: none;
}

.mud-button-root.mud-button.mud-button-filled:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow: 0 4px 18px -6px oklch(from var(--primary) l c h / 0.45);
}

/* The lime gets its own glow so a secondary action is not haloed in teal. */
.mud-button-root.mud-button.mud-button-filled-secondary:hover:not(:disabled) {
    box-shadow: 0 4px 18px -6px oklch(from var(--saffron) l c h / 0.45);
}

.mud-button-root.mud-button.mud-button-filled-error:hover:not(:disabled) {
    box-shadow: 0 4px 18px -6px oklch(from var(--destructive) l c h / 0.45);
}

/* variant: outline — border-input bg-card shadow-xs, hover:bg-accent. A hairline on the card tier, not a transparent button with a brand-coloured edge. */
.mud-button-root.mud-button.mud-button-outlined {
    padding: 0 1rem;
    border: 1px solid var(--input);
    background-color: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-xs);
}

.mud-button-root.mud-button.mud-button-outlined:hover:not(:disabled) {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* An outlined button that was given a colour keeps it — the rule above sets `color: var(--foreground)` for every outlined button, which threw away Color.Error and Color.Primary: "Cancel" on a booking card rendered identical to "Edit players" beside it, and the one destructive action on the screen had no cue at all.
   The neutral outlined button is still the default; these three only fire when a call site asked for a colour. */
.mud-button-root.mud-button.mud-button-outlined-error {
    border-color: var(--danger-edge);
    color: var(--destructive);
}

.mud-button-root.mud-button.mud-button-outlined-error:hover:not(:disabled) {
    border-color: var(--destructive);
    background-color: var(--danger-bg);
    color: var(--destructive);
}

.mud-button-root.mud-button.mud-button-outlined-primary {
    border-color: oklch(from var(--primary) l c h / 0.45);
    color: var(--primary);
}

.mud-button-root.mud-button.mud-button-outlined-primary:hover:not(:disabled) {
    border-color: var(--primary);
    background-color: var(--primary-soft);
    color: var(--primary);
}

.mud-button-root.mud-button.mud-button-outlined-warning {
    border-color: var(--warning-edge);
    color: var(--warning-ink);
}

.mud-button-root.mud-button.mud-button-outlined-warning:hover:not(:disabled) {
    border-color: var(--warning);
    background-color: var(--warning-bg);
    color: var(--warning-ink);
}

/* Same omission on the ghost variant, which already had an exception for Primary. */
.mud-button-root.mud-button.mud-button-text-error {
    color: var(--destructive);
}

.mud-button-root.mud-button.mud-button-text-error:hover:not(:disabled) {
    background-color: var(--danger-bg);
    color: var(--destructive);
}

/* variant: ghost (MudBlazor calls it Text) — hover:bg-accent, no border, no fill at rest. */
.mud-button-root.mud-button.mud-button-text {
    color: var(--foreground);
}

.mud-button-root.mud-button.mud-button-text:hover:not(:disabled) {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* A text button in a brand colour stays that colour — it is the platform's `link` variant, and turning it into foreground ink would lose the cue. */
.mud-button-root.mud-button.mud-button-text-primary {
    color: var(--primary);
}

/* sizes — sm: h-8 px-3 gap-1.5 · lg: h-10 px-6 */
.mud-button-root.mud-button.mud-button-filled-size-small,
.mud-button-root.mud-button.mud-button-outlined-size-small,
.mud-button-root.mud-button.mud-button-text-size-small {
    min-height: var(--ark-control-h-sm);
    padding: 0 0.75rem;
    font-size: var(--text-xs);
}

.mud-button-root.mud-button.mud-button-filled-size-large,
.mud-button-root.mud-button.mud-button-outlined-size-large,
.mud-button-root.mud-button.mud-button-text-size-large {
    min-height: var(--ark-control-h-lg);
    padding: 0 1.5rem;
}

/* icon button — size-9 rounded-md, hover:bg-accent; MudBlazor makes these circles, the platform squares them off so an icon button lines up with a text button beside it.
   `:not(.mud-input *)` excludes icon buttons that are really inside a field (a picker's calendar, a select's chevron, a clear button) — those stay round at 28px (see FIELD block), since a 36px square flush against a 36px pill field would have its corners outside the curve; the switch thumb, checkbox and radio are excluded by class for the same reason. */
.mud-button-root.mud-icon-button:not(.mud-switch-base):not(.mud-checkbox):not(.mud-radio-button):not(.mud-input *) {
    inline-size: var(--ark-control-h);
    block-size: var(--ark-control-h);
    padding: 0;
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out-cubic),
                color var(--duration-fast) var(--ease-out-cubic);
}

.mud-button-root.mud-icon-button:not(.mud-switch-base):not(.mud-checkbox):not(.mud-radio-button):not(.mud-input *):hover:not(:disabled) {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* size-7 · the compact icon button used inside dense chrome. */
.mud-button-root.mud-icon-button.mud-icon-button-size-small:not(.mud-switch-base):not(.mud-checkbox):not(.mud-radio-button):not(.mud-input *) {
    inline-size: 1.75rem;
    block-size: 1.75rem;
}

/* CARD ← ui/card.tsx. rounded-lg border border-border bg-card text-card-foreground shadow-sm.
   MudPaper is the app's card; MudBlazor gives it a Material elevation instead of a hairline, and a hairline plus a low resting shadow is what makes the card read as a sheet on a desk rather than a floating tile. */

.mud-paper {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), var(--highlight-top);
    background-image: none;
}

/* MudBlazor's elevation classes each set their own box-shadow, written later in its sheet than `.mud-paper`, so overriding the class rather than the element is the only way to keep the card's resting shadow at one step whatever Elevation a call site passes.
   Elevation="0" still means flat. */
.mud-paper.mud-elevation-0 {
    box-shadow: none;
}

.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3,
.mud-paper.mud-elevation-4,
.mud-paper.mud-elevation-5,
.mud-paper.mud-elevation-6 {
    box-shadow: var(--shadow-card), var(--highlight-top);
}

/* Anything above six steps is a surface that really floats — a menu, a command palette. It gets the lift, not a bigger Material shadow. */
.mud-paper[class*="mud-elevation-"]:not(.mud-elevation-0):not(.mud-elevation-1):not(.mud-elevation-2):not(.mud-elevation-3):not(.mud-elevation-4):not(.mud-elevation-5):not(.mud-elevation-6) {
    box-shadow: var(--shadow-lift), var(--highlight-top);
}

/* Outlined asks for the hairline and nothing else. */
.mud-paper.mud-paper-outlined {
    border-color: var(--border);
    box-shadow: none;
}

/* FIELD ← ui/input.tsx + ui/label.tsx. Input: h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm shadow-xs, focus-visible:border-ring + a 3px ring, aria-invalid:border-destructive, dark mode tints the well. Label: text-sm font-medium leading-none, sitting ABOVE the field.
   That's the structural difference: MudBlazor floats the label into the field and then onto the border line on focus/value, the platform never floats it. Pinned above in CSS rather than rewriting every Ark* input and call site passing Label= — one block covers MudTextField, MudSelect, MudNumericField, MudAutocomplete and the pickers at once. */

/* the label, pinned above — `.mud-input-control` is already `display: flex; flex-direction: column` with the label as its first child, so dropping the absolute positioning is enough to make it a static row above the field.
   The transform has to be beaten with !important: MudBlazor sets it from several `.mud-input-label-*` combinations, each of which would otherwise re-float the label the moment the field gains focus or a value. */
/* The child-combinator path is MudBlazor's own: `.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol`, three classes deep — a plain two-class descendant selector loses to it.
   An earlier version of this rule moved the label but left it at MudBlazor's 16px/400 (margin and transform landed, size and weight did not); matched exactly, this wins on source order. */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined,
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol,
.mud-input-control .mud-input-label-outlined,
.mud-input-control .mud-input-label-inputcontrol {
    position: static;
    transform: none !important;
    max-width: 100%;
    /* MudBlazor renders the field FIRST and the label second inside .mud-input-control-input-container — DOM order it can afford because the floating label was absolutely positioned; dropping that positioning without this leaves the label sitting under the field. */
    order: -1;
    margin: 0 0 0.5rem;
    padding: 0 !important;

    /* text-sm font-medium leading-none, in foreground ink — a label is content, not a placeholder. */
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: var(--foreground);

    /* The floated label was decoration and MudBlazor made it click-through. A label above the field is a real label: clicking it should focus the field. */
    pointer-events: auto;
}

/* Focus does not re-tint the label. Upstream keeps it in foreground ink at all times; turning it teal on focus reads as a validation state. */
.mud-input-control.mud-focused .mud-input-label-outlined,
.mud-input-control.mud-focused .mud-input-label-inputcontrol {
    color: var(--foreground);
}

/* An invalid field marks the label too — the ring alone is easy to miss. */
.mud-input-control.mud-input-error .mud-input-label-outlined,
.mud-input-control.mud-input-error .mud-input-label-inputcontrol {
    color: var(--destructive);
}

/* MudBlazor pushes a labelled field down to leave room for the label to float into — 16px on the Text variant, 8px above the control on the outlined one; with the label sitting above as its own row, both are just a gap.
   The first selector is MudBlazor's exact path; a shorter one loses to it. */
.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-text-with-label {
    margin-top: 0;
}

.mud-input-control.mud-input-outlined-with-label,
.mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label,
.mud-input-control.mud-input-control-margin-normal.mud-input-outlined-with-label {
    margin-top: 0;
    margin-bottom: 0;
}

/* The notch mask, off. MudBlazor masks the top of an input transparent so a floating label has somewhere to sit — `mask-image: linear-gradient(to bottom, transparent 10.5px, black 10.5px)` on a dense field, 18px on a hidden-label one.
 * With the label moved above the field there's no notch to cut, and what the mask actually did was slice the top off the value: a date read as "2026/09/02" with its upper third missing, and a timezone string looked clipped against the field's border.
 * !important rather than a specificity duel: MudBlazor declares this mask across six rules escalating from one class up to an element plus four classes, so matching them all would mean six selectors to revisit on every upgrade — one important declaration covers the family and keeps covering it.
 */
.mud-input > input.mud-input-root,
.mud-input > textarea.mud-input-root,
.mud-input > div.mud-input-slot.mud-input-root {
    mask-image: none !important;
}

/* the field — the border lives on `.mud-input-outlined-border`, a sibling overlay div, not on the input, so the radius, border colour and focus ring go there, and the height and padding go on the input. */
.mud-input.mud-input-outlined {
    min-height: var(--ark-control-h);
    box-sizing: border-box;
    font-size: var(--text-sm);
    color: var(--foreground);
    background-color: transparent;
}

/* rounded-lg border-input shadow-xs. The transition covers border-color so a field's focus state fades in rather than snapping. */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--radius-lg);
    border-width: 1px;
    border-color: var(--input);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-fast) var(--ease-out-cubic),
                box-shadow var(--duration-fast) var(--ease-out-cubic);
}

/* dark:bg-[--input @30%] — a field reads as a recessed well on graphite, where a transparent one would disappear into the card. */
:root.dark .mud-input.mud-input-outlined .mud-input-outlined-border,
:root[data-theme="dark"] .mud-input.mud-input-outlined .mud-input-outlined-border {
    background-color: oklch(from var(--input) l c h / 0.3);
}

.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--border-strong);
}

/* focus-visible:border-ring focus-visible:ring-[3px]. MudBlazor thickens its own border to 2px on focus, which shifts the text inside by a pixel; the ring does the work instead and the border stays 1px. */
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input-control.mud-focused .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--ring);
    box-shadow: var(--ark-focus-ring);
}

/* The notch itself, closed. MudBlazor's outlined border is a fieldset-shaped element with a hidden <legend> inside it; at rest that legend is `width: 0`, but the moment the field has a value (`.mud-shrink`) or takes focus, MudBlazor expands it to `width: auto; padding: 0 5px` — and a legend inside a bordered fieldset CUTS A GAP in the top border the width of itself. That gap is the notch the floating label was meant to sit in.
 * With the label moved above the field, nothing ever occupies that notch, so all it did was punch a hole in the border exactly where the label sits above it: an empty field looked perfect and a filled one looked broken, which is what made it read as the label damaging the border.
 * Held at width 0 in every state MudBlazor expands it in. Selectors mirror its own (four classes plus the element) so source order decides, with no !important.
 */
.mud-input.mud-input-outlined > .mud-input-outlined-border legend,
.mud-input.mud-input-outlined.mud-shrink > .mud-input-outlined-border legend,
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border legend,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border legend,
.mud-input.mud-input-outlined:has(:-webkit-autofill) > .mud-input-outlined-border legend {
    inline-size: 0;
    padding: 0;
}

/* MudBlazor also thickens the border to 2px on :focus-within, which shifts the text inside by a pixel — the focus ring above carries the state instead, so the hairline stays 1px.
   Its selector uses :focus-within rather than the .mud-focused class, so it needs claiming separately. */
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--ring);
    box-shadow: var(--ark-focus-ring);
}
/* aria-invalid:border-destructive + a destructive-tinted ring. */
.mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border,
.mud-input-control.mud-input-error .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px oklch(from var(--destructive) l c h / 0.2);
}

/* px-3, and a vertical padding that lands the 36px height with MudBlazor's own 1.15rem line box.
   Long-form selector because MudBlazor's dense rule is `.mud-input>input.mud-input-root-outlined.mud-input-root-margin-dense`, and a shorter one would lose on specificity. */
.mud-input > input.mud-input-root-outlined,
.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-input > textarea.mud-input-root-outlined,
.mud-input > textarea.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-input > div.mud-input-slot.mud-input-root-outlined,
.mud-input > div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding: 0.4375rem 0.75rem;
    font-size: var(--text-sm);
    line-height: 1.375;
}

/* A textarea grows, so it gets the padding but not the fixed height. */
.mud-input.mud-input-outlined:has(> textarea) {
    min-height: 0;
}

/* the OTHER two variants, given the same box — MudBlazor has three field variants and defaults to Text, which draws a bottom hairline and nothing else; pages here are split (ten call sites ask for Outlined, eight for Text, several pass nothing and get Text), so the app showed two different kinds of field side by side where the platform has one.
   Rather than edit every call site (and stay one forgotten `Variant=` away from the split returning), Text and Filled are given the outlined variant's box here — those two have no `.mud-input-outlined-border` element, so the border goes on the field itself; MudBlazor's underline is a `::before` hairline plus a `::after` that scales in on focus, and both are switched off. */
.mud-input.mud-input-text,
.mud-input.mud-input-filled {
    min-height: var(--ark-control-h);
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--input);
    border-radius: var(--radius-lg);
    background-color: transparent;
    box-shadow: var(--shadow-xs);
    font-size: var(--text-sm);
    color: var(--foreground);
    transition: border-color var(--duration-fast) var(--ease-out-cubic),
                box-shadow var(--duration-fast) var(--ease-out-cubic);
}

:root.dark .mud-input.mud-input-text,
:root.dark .mud-input.mud-input-filled,
:root[data-theme="dark"] .mud-input.mud-input-text,
:root[data-theme="dark"] .mud-input.mud-input-filled {
    background-color: oklch(from var(--input) l c h / 0.3);
}

/* The underline, off. Two classes so these beat MudBlazor's own single-class `.mud-input-underline:before` / `:after`. */
.mud-input.mud-input-underline::before,
.mud-input.mud-input-underline::after {
    display: none;
}

.mud-input.mud-input-text:hover:not(.mud-disabled),
.mud-input.mud-input-filled:hover:not(.mud-disabled) {
    border-color: var(--border-strong);
}

.mud-input.mud-input-text.mud-focused,
.mud-input.mud-input-filled.mud-focused,
.mud-input-control.mud-focused .mud-input.mud-input-text,
.mud-input-control.mud-focused .mud-input.mud-input-filled {
    border-color: var(--ring);
    box-shadow: var(--ark-focus-ring);
}

.mud-input.mud-input-text.mud-input-error,
.mud-input.mud-input-filled.mud-input-error,
.mud-input-control.mud-input-error .mud-input.mud-input-text,
.mud-input-control.mud-input-error .mud-input.mud-input-filled {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px oklch(from var(--destructive) l c h / 0.2);
}

/* px-3, and the vertical padding that lands 36px. The Text variant's input has no horizontal padding of its own — the underline used to run the full width, so there was nothing to inset from.
   The long-form selectors match MudBlazor's own dense rules, which are written against the element plus two classes. */
.mud-input.mud-input-text > input.mud-input-root,
.mud-input.mud-input-text > input.mud-input-root.mud-input-root-margin-dense,
.mud-input.mud-input-text > textarea.mud-input-root,
.mud-input.mud-input-text > textarea.mud-input-root.mud-input-root-margin-dense,
.mud-input.mud-input-text > div.mud-input-slot.mud-input-root,
.mud-input.mud-input-text > div.mud-input-slot.mud-input-root.mud-input-root-margin-dense,
.mud-input.mud-input-filled > input.mud-input-root,
.mud-input.mud-input-filled > input.mud-input-root.mud-input-root-margin-dense,
.mud-input.mud-input-filled > div.mud-input-slot.mud-input-root,
.mud-input.mud-input-filled > div.mud-input-slot.mud-input-root.mud-input-root-margin-dense {
    margin: 0;
    padding: 0.4375rem 0.75rem;
    font-size: var(--text-sm);
    line-height: 1.375;
    mask-image: none;
}

/* A leading adornment (the search glyph) needs the inset the input just gave up, and MudBlazor zeroes the input's own start padding when one is present. */
.mud-input .mud-input-adornment-start {
    margin-inline-start: 0.625rem;
}

.mud-input > input.mud-input-root-adorned-start,
.mud-input > div.mud-input-slot.mud-input-root-adorned-start {
    padding-inline-start: 0.5rem;
}

/* placeholder:text-muted-foreground */
.mud-input input::placeholder,
.mud-input textarea::placeholder {
    color: var(--muted-foreground);
    opacity: 1;
}

/* An adornment — the picker's calendar, a select's chevron, a clear button — sits INSIDE the field, so it must not carry the square icon-button geometry from the block above.
   Round, and inset from the field's trailing edge: the field is 36px tall with an 18px radius, so its ends are full semicircles — a 28px SQUARE button flush against that curve had corners outside the field, which is what made the calendar icon look clipped; a circle of the same size has no corners to poke out, and the 0.25rem inset keeps its edge clear of the curve's widest point. */
.mud-input-adornment .mud-icon-button,
.mud-input .mud-icon-button {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* The inset, and it is generous on purpose: a 36px field with an 18px radius has semicircular ends, so anything parked against one has to clear the CURVE, not just the edge — at the vertical middle the boundary bulges a full 18px inward. Shrinking the icon to fit that squeeze read as too small, so instead it keeps its 28px size and moves inward past the curve: 12px of margin puts its right rim about 14px in, where the field is already almost full height and a 28px circle clears top and bottom by ~3.5px.
   Round rather than square, unlike every other icon button in the app: a square's corners are exactly what pokes out of a rounded end. */
.mud-input .mud-input-adornment-end {
    margin-inline-end: 0.75rem;
}

/* The glyph inside it: size-4, in the muted ink, so the calendar or the chevron reads as part of the field rather than as an action sitting on top of one. */
.mud-input .mud-icon-button .mud-icon-root {
    inline-size: 1rem;
    block-size: 1rem;
    font-size: 1rem;
    color: var(--muted-foreground);
}

.mud-input .mud-icon-button:hover .mud-icon-root {
    color: var(--foreground);
}

/* MudBlazor zeroes the input's trailing padding when a field is adorned, which leaves the value's text running right up under the icon. Restore a little. */
.mud-input > input.mud-input-root-adorned-end,
.mud-input > div.mud-input-slot.mud-input-root-adorned-end {
    padding-inline-end: 0.5rem;
}

/* A picker's field is read-only and its whole width opens the calendar, so the value should not crowd the glyph that now sits further in. */
.mud-picker .mud-input > input.mud-input-root-adorned-end {
    padding-inline-end: 0.25rem;
}

/* Helper and validation text below the field: text-xs, muted, and the destructive tone when it is an error. */
.mud-input-helper-text {
    margin-top: 0.375rem;
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--muted-foreground);
}

.mud-input-helper-text.mud-input-error {
    color: var(--destructive);
}

/* disabled:opacity-50 disabled:cursor-not-allowed */
.mud-input-control .mud-input.mud-disabled,
.mud-input-control.mud-disabled {
    opacity: 0.5;
}

/* SELECT + MENU ← ui/select.tsx, ui/dropdown-menu.tsx. Content: rounded-lg border bg-popover shadow-md, p-1. Item: h-8 rounded-md px-2.5 text-[12.5px] font-medium, hover:bg-accent, selected wears primary-soft + primary ink. */

.mud-popover {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background-color: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-md);
    background-image: none;
}

.mud-popover .mud-list {
    padding: 0.25rem;
}

.mud-list-item {
    min-height: var(--ark-control-h-sm);
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-md);
    font-size: 0.78125rem; /* text-[12.5px] */
    font-weight: 500;
    transition: background-color var(--duration-fast) var(--ease-out-cubic),
                color var(--duration-fast) var(--ease-out-cubic);
}

.mud-list-item:hover:not(.mud-list-item-disabled) {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

/* The chosen option. primary-soft fill with primary ink — the same pair the active nav item wears, so "selected" reads the same way everywhere. */
.mud-list-item.mud-selected-item {
    background-color: var(--primary-soft);
    color: var(--primary);
}

/* The chevron on a closed select. */
.mud-select .mud-input-adornment .mud-icon-root {
    color: oklch(from var(--muted-foreground) l c h / 0.6);
}

/* PICKER — the platform has no date picker primitive of its own; it uses a native <input type="date">, so this block is not a port. It dresses the MudBlazor calendar in the same card, radius and nav-item vocabulary as everything above, so it doesn't look imported. */

.mud-picker-container,
.mud-picker-inline-paper {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.mud-picker-toolbar,
.mud-picker-calendar-header {
    background-color: transparent;
    color: var(--foreground);
}

/* The chosen day, and today's outline, in the brand. */
.mud-picker .mud-button-root.mud-picker-calendar-day.mud-selected {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.mud-picker .mud-button-root.mud-picker-calendar-day.mud-current {
    border: 1px solid var(--primary);
    color: var(--primary);
}

/* SWITCH ← ui/switch.tsx. Track: h-5 w-9 rounded-full, bg-input off / bg-primary on. Thumb: h-4 w-4 rounded-full bg-overlay-foreground, translate-x-[18px] on.
   MudBlazor draws a Material switch — a thin track with the thumb overhanging both ends; the platform's is a pill the thumb sits inside, so the track is rebuilt here rather than re-coloured. */

.mud-switch .mud-switch-span {
    inline-size: 2.25rem; /* w-9 */
    block-size: 1.25rem; /* h-5 */
    padding: 0;
}

.mud-switch .mud-switch-track {
    inline-size: 100%;
    block-size: 100%;
    border-radius: 9999px;
    opacity: 1;
    background-color: var(--input);
    transition: background-color var(--duration-default) var(--ease-out-cubic);
}

/* MudBlazor colours the track by tinting it from the thumb's colour class, so the "on" fill has to be claimed per colour rather than once. Primary and secondary are the two the app uses. */
.mud-switch:has(.mud-switch-base.mud-checked.mud-primary-text) .mud-switch-track,
.mud-switch:has(.mud-switch-base.mud-checked.mud-secondary-text) .mud-switch-track {
    background-color: var(--primary);
}

/* The thumb is MudBlazor's icon button. It is positioned by a transform, so the two states are set as absolute offsets inside the track. */
.mud-switch .mud-switch-base {
    padding: 0;
    inset-block-start: 0.125rem;
    inset-inline-start: 0.125rem;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--overlay-foreground);
    transition: transform var(--duration-default) var(--ease-out-cubic);
}

.mud-switch .mud-switch-base.mud-checked {
    transform: translateX(1rem);
}

/* The label's gap came from the Material thumb overhang removed above; without this it sat flush against the pill. */
.mud-switch > .mud-typography {
    margin-inline-start: 0.625rem;
}

.mud-switch .mud-switch-base:hover {
    background-color: transparent;
}

/* The thumb glyph itself: a filled dot with a hairline drop shadow, not a Material circle with a ripple halo. */
.mud-switch .mud-switch-base .mud-icon-root {
    inline-size: 1rem;
    block-size: 1rem;
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.2));
}

/* CHECKBOX + RADIO — the platform has no checkbox primitive; these follow the switch's palette so a boolean control is the brand colour when on and the input hairline when off. */

.mud-checkbox .mud-button-root.mud-icon-button,
.mud-radio .mud-button-root.mud-icon-button {
    padding: 0.375rem;
}

.mud-checkbox .mud-icon-button:hover,
.mud-radio .mud-icon-button:hover {
    background-color: var(--accent);
}

/* BADGE ← ui/badge.tsx. rounded-sm border px-2 py-[3px] text-[11px] font-medium leading-none.
   The four status variants wear the token "quads" — a pale fill, the dark ink of the same hue, a light edge of the same hue — not an alpha wash of the solid colour: with no edge and text the same hue as the fill, a tag has no shape of its own and reads as a floating blob.
   MudChip is the app's badge; MudBlazor makes it a 32px pill with a 4px margin, the platform's is a compact rectangle. */

.mud-chip {
    block-size: auto;
    min-block-size: 0;
    margin: 0;
    padding: 3px 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem; /* text-[11px] */
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
}

.mud-chip .mud-chip-content {
    gap: 0.375rem; /* gap-1.5 */
}

.mud-chip.mud-chip-size-small {
    padding: 2px 0.375rem;
    font-size: 0.625rem;
}

/* A chip set is a row of tags, so its own spacing replaces the per-chip margin removed above. */
.mud-chipset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* default — border-border bg-card text-foreground. */
.mud-chip.mud-chip-text,
.mud-chip.mud-chip-filled,
.mud-chip.mud-chip-outlined {
    border-color: var(--border);
    background-color: var(--card);
    color: var(--foreground);
}

/* brand — border-transparent bg-primary-soft text-primary. */
.mud-chip.mud-chip-color-primary,
.mud-chip.mud-chip-text.mud-chip-color-primary,
.mud-chip.mud-chip-filled.mud-chip-color-primary,
.mud-chip.mud-chip-outlined.mud-chip-color-primary {
    border-color: transparent;
    background-color: var(--primary-soft);
    color: var(--primary);
}

/* the status quads — theme-invariant on purpose: a pale tag on graphite still reads, and matching the platform exactly is the point. */
.mud-chip.mud-chip-color-success,
.mud-chip.mud-chip-text.mud-chip-color-success,
.mud-chip.mud-chip-filled.mud-chip-color-success,
.mud-chip.mud-chip-outlined.mud-chip-color-success {
    border-color: var(--success-edge);
    background-color: var(--success-bg);
    color: var(--success-ink);
}

.mud-chip.mud-chip-color-warning,
.mud-chip.mud-chip-text.mud-chip-color-warning,
.mud-chip.mud-chip-filled.mud-chip-color-warning,
.mud-chip.mud-chip-outlined.mud-chip-color-warning {
    border-color: var(--warning-edge);
    background-color: var(--warning-bg);
    color: var(--warning-ink);
}

.mud-chip.mud-chip-color-info,
.mud-chip.mud-chip-text.mud-chip-color-info,
.mud-chip.mud-chip-filled.mud-chip-color-info,
.mud-chip.mud-chip-outlined.mud-chip-color-info {
    border-color: var(--info-edge);
    background-color: var(--info-bg);
    color: var(--info-ink);
}

.mud-chip.mud-chip-color-error,
.mud-chip.mud-chip-text.mud-chip-color-error,
.mud-chip.mud-chip-filled.mud-chip-color-error,
.mud-chip.mud-chip-outlined.mud-chip-color-error {
    border-color: var(--danger-edge);
    background-color: var(--danger-bg);
    color: var(--danger-ink);
}

/* muted / outline — border-border-strong bg-muted text-muted-foreground. */
.mud-chip.mud-chip-color-dark,
.mud-chip.mud-chip-text.mud-chip-color-dark,
.mud-chip.mud-chip-filled.mud-chip-color-dark {
    border-color: var(--border-strong);
    background-color: var(--muted);
    color: var(--muted-foreground);
}

/* The lime, as a tag. --saffron is the fill token and --saffron-foreground its ink; the pair is what stays legible against graphite regardless of theme. */
.mud-chip.mud-chip-color-secondary,
.mud-chip.mud-chip-text.mud-chip-color-secondary,
.mud-chip.mud-chip-filled.mud-chip-color-secondary {
    border-color: transparent;
    background-color: var(--saffron);
    color: var(--saffron-foreground);
}

/* The purple, as a tag — same fill/ink pair as the lime; both stops flip with the theme, so MudBlazor's white ink would sit at 3.4:1 in dark.
   Without this block the chip loses to the default rule above (equal specificity, later file), and the Admin badge reads as a plain grey tag. */
.mud-chip.mud-chip-color-tertiary,
.mud-chip.mud-chip-text.mud-chip-color-tertiary,
.mud-chip.mud-chip-filled.mud-chip-color-tertiary {
    border-color: transparent;
    background-color: var(--tertiary-color);
    color: var(--tertiary-foreground);
}

/* INLINE BANNER ← the platform's inline alert (the bordered, muted-fill block its dialogs and forms use), applied to MudAlert.
   rounded-md border px-3 py-2.5 text-sm. Each severity wears its quad, the same triple the badge above uses, so a warning banner and a warning tag are recognisably the same colour idea at two sizes. */

.mud-alert {
    /* Hugs its message rather than ruling the full column — a one-line "nothing booked today" stretched across a wide page reads as a broken layout, since the banner is a note and a note is the width of what it says; it still caps at the container so a long validation message wraps instead of overflowing. */
    inline-size: fit-content;
    max-inline-size: 100%;
    /* The floor: whatever a call site passes, the banner never collapses below a comfortable tap target. */
    min-block-size: 2.25rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
    font-size: var(--text-sm);
    line-height: 1.45;
}

.mud-alert .mud-alert-message {
    padding: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
}

.mud-alert .mud-alert-icon {
    padding: 0;
    margin-inline-end: 0.625rem;
}

.mud-alert .mud-alert-icon .mud-icon-root {
    font-size: 1.125rem;
}

/* Dense keeps the banner compact, not flat: MudBlazor's own `.mud-alert.mud-dense{padding:0px 12px}` is two classes and zeroes the vertical padding outright, which a one-class rule above cannot beat — every Dense="true" banner in the app came out as a squashed pill with its text touching the edges.
   Matched at the same specificity, with 8px instead of the 10px a roomy banner gets. */
.mud-alert.mud-dense {
    padding: 0.5rem 0.75rem;
}

.mud-alert.mud-alert-text-success,
.mud-alert.mud-alert-filled-success,
.mud-alert.mud-alert-outlined-success {
    border-color: var(--success-edge);
    background-color: var(--success-bg);
    color: var(--success-ink);
}

.mud-alert.mud-alert-text-warning,
.mud-alert.mud-alert-filled-warning,
.mud-alert.mud-alert-outlined-warning {
    border-color: var(--warning-edge);
    background-color: var(--warning-bg);
    color: var(--warning-ink);
}

.mud-alert.mud-alert-text-info,
.mud-alert.mud-alert-filled-info,
.mud-alert.mud-alert-outlined-info {
    border-color: var(--info-edge);
    background-color: var(--info-bg);
    color: var(--info-ink);
}

.mud-alert.mud-alert-text-error,
.mud-alert.mud-alert-filled-error,
.mud-alert.mud-alert-outlined-error {
    border-color: var(--danger-edge);
    background-color: var(--danger-bg);
    color: var(--danger-ink);
}

.mud-alert.mud-alert-text-normal,
.mud-alert.mud-alert-filled-normal,
.mud-alert.mud-alert-outlined-normal {
    border-color: var(--border);
    background-color: var(--muted);
    color: var(--foreground);
}

/* An alert's icon inherits the quad's ink; MudBlazor otherwise paints it the solid severity colour, which is a second, louder hue in the same block. */
.mud-alert .mud-alert-icon .mud-icon-root {
    color: currentColor;
}

/* TABLE ← ui/table.tsx. Header: h-10 px-3 font-mono text-[10.5px] uppercase tracking-[0.22em] text-muted-foreground, one bottom hairline. Row: border-b border-border, hover:bg-accent. Cell: px-3 py-3 text-sm tabular-nums. No zebra striping — the platform draws hairlines, not bands. */

.mud-table {
    border-radius: var(--radius-lg);
}

.mud-table .mud-table-head .mud-table-cell {
    block-size: 2.5rem; /* h-10 */
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--border);
    background-color: transparent;
    font-family: var(--font-mono);
    font-size: 0.65625rem; /* text-[10.5px] */
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.mud-table .mud-table-body .mud-table-cell {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* [&_tr:last-child]:border-0 */
.mud-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}

.mud-table .mud-table-body .mud-table-row:hover {
    background-color: var(--accent);
}

/* A row's actions sit against the trailing edge on one line; set with CellClass on the column. */
.mud-table .mud-table-body .mud-table-cell.ark-cell-actions {
    text-align: end;
    white-space: nowrap;
}

/* Two tags in one cell, such as Active and Temp password, need a gap the chip itself no longer carries. */
.mud-table-cell .ark-chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Zebra bands off. The platform's table separates rows with a hairline; a band on top of that reads as two competing grids. */
.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: transparent;
}

/* A dense table tightens the cell, not the header. */
.mud-table.mud-table-dense .mud-table-body .mud-table-cell {
    padding: 0.375rem 0.75rem;
}

/* The data grid's own chrome: the toolbar and the pager sit on the card, so they get the card's hairline rather than a Material divider. */
.mud-table .mud-table-toolbar,
.mud-table .mud-table-pagination {
    border-color: var(--border);
    background-color: transparent;
    min-height: 3rem;
}

.mud-table .mud-table-pagination {
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

/* DIALOG ← ui/dialog.tsx. Overlay: bg-[oklch(0_0_0_/_0.4)] backdrop-blur-[6px]. Content: rounded-xl border bg-card shadow-xl. Header: px-6 pt-6 pb-3 · Body: px-6 pb-5 pt-1 · Footer: border-t px-6 py-4, actions right. Title: font-display text-lg font-semibold tracking-tight.
   ark-dialog.css already fixes the actions row's padding; this block does the surface, the type and the header rule. */

.mud-overlay .mud-overlay-scrim {
    background-color: oklch(0 0 0 / 0.4);
    backdrop-filter: blur(6px);
}

.mud-dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--card);
    color: var(--card-foreground);
    box-shadow: var(--shadow-lift);
}

/* Weight 400 and open tracking: Bebas Neue has no bold to ask for, and a synthesised one blurs a condensed caps face. See the heading rule in style.scss. */
.mud-dialog .mud-dialog-title {
    padding: 1.5rem 1.5rem 0.75rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: var(--tracking-display);
}

.mud-dialog .mud-dialog-content {
    padding: 0.25rem 1.5rem 1.25rem;
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* border-t on the footer: the rule is what separates the actions from the content, and it is the reason the platform's dialogs read as three bands.
   This block is the ONLY owner of the actions row — a second sheet (ark-dialog.css) used to set `padding-block: 0 20px` here and loaded later, winning the padding while this rule kept the border, which put the divider hard against the button with no gap above it. That sheet is gone; keep it that way. */
.mud-dialog .mud-dialog-actions {
    border-top: 1px solid var(--border);
    padding: 1rem 1.5rem;
    gap: 0.5rem;
}

/* The gap above does the spacing; MudBlazor's own per-button margin on top of it reads as an uneven gutter. */
.mud-dialog .mud-dialog-actions > * {
    margin: 0;
}

/* TABS — the platform's tab strip: text-sm font-medium, muted at rest, foreground when active, with a 2px brand underline; MudBlazor uppercases its tabs and animates a thick slider, both toned down here. */

/* Strip and panels read as one card: MudBlazor paints the strip on the surface and leaves the panels bare on the page. */
.mud-tabs .mud-tabs-tabbar {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* The padding lives here: MudBlazor renders each panel as display: contents, so a PanelClass padding never applied. */
.mud-tabs .mud-tabs-panels {
    padding: 1rem;
    border: 1px solid var(--border);
    border-block-start: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background-color: var(--card);
}

/* A grid inside a panel is already on the card, so it drops its own frame rather than nesting a second one. */
.mud-tabs .mud-tabs-panels .mud-table {
    border: 0;
    background-color: transparent;
}

.mud-tabs .mud-tab {
    min-height: var(--ark-control-h-lg);
    min-width: 0;
    padding: 0 0.875rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    text-transform: none;
    color: var(--muted-foreground);
}

.mud-tabs .mud-tab:hover:not(.mud-tab-active) {
    color: var(--foreground);
    background-color: var(--accent);
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--foreground);
}

.mud-tabs .mud-tab-slider {
    block-size: 2px;
    background-color: var(--primary);
}

/* NAV RAIL ← layout/sidebar.tsx. Item: h-9 gap-3 rounded-md px-3 text-sm font-medium — rest → text-muted-foreground, hover → bg-accent + text-foreground, active → bg-primary-soft + text-primary plus a 2px brand bar pinned to the left edge. Group caption: the accordion header, same metrics as an item.
   The 2px bar is the platform's signature: colour alone is not an indicator, and on a short rail there is nothing else to compare an item against. */

.mud-navmenu {
    padding: 0.875rem 0.625rem;
}

/* Prefixed with `.mud-drawer` throughout this block: several declarations below have to outrank MudBlazor's own `.mud-navmenu.mud-navmenu-* .mud-nav-link` rules, and keeping one specificity for the whole block is less fragile than raising it line by line as each collision turns up.
   The row is a GRID, not a flex row with a gap: flex made the label's position a sum of three things MudBlazor also has opinions about (the row's gap, the icon's margin, the label's margin), so a rule landing on any one moved the label out of the group-caption column. A grid states the geometry once: 16px for the icon, the rest for the label, `auto` for a group's chevron — every row's label starts at exactly 0.75rem + 1rem + 0.75rem from the row's edge, the offset the caption rule below is indented by. */
.mud-drawer .mud-navmenu .mud-nav-link,
.mud-drawer .mud-navmenu .mud-nav-group > .mud-nav-link {
    position: relative;
    display: grid;
    grid-template-columns: 1rem 1fr auto;
    align-items: center;
    min-height: var(--ark-control-h);
    margin: 0.0625rem 0;
    padding: 0 0.75rem;
    gap: 0.75rem; /* gap-3 — the grid's column gap now */
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted-foreground);
    transition: background-color var(--duration-fast) var(--ease-out-cubic),
                color var(--duration-fast) var(--ease-out-cubic);
}

.mud-drawer .mud-navmenu .mud-nav-link:hover:not(.active) {
    background-color: var(--accent);
    color: var(--foreground);
}

/* bg-primary-soft text-primary. Prefixed with `.mud-drawer` to reach the specificity of MudBlazor's own `.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled)` — four classes plus a :not(), which a plain `.mud-navmenu .mud-nav-link.active` loses to no matter how late this sheet loads.
   Its fill is a flat 6% black; the platform's is a tint of the brand. The :hover / :focus-visible / :active variants are claimed too because MudBlazor re-asserts the grey on each of them. */
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover,
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible,
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):active {
    background-color: var(--primary-soft);
    color: var(--primary);
}

/* The 2px brand bar. Drawn on the item itself with ::before rather than as an extra element, because MudNavLink's markup is MudBlazor's. */
.mud-drawer .mud-navmenu .mud-nav-link.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    inline-size: 2px;
    block-size: 1rem;
    transform: translateY(-50%);
    border-start-end-radius: 9999px;
    border-end-end-radius: 9999px;
    background-color: var(--primary);
}

/* MudBlazor's bordered variant draws its own edge on an active link. The 2px bar above replaces it. */
.mud-drawer .mud-navmenu .mud-nav-link.active {
    border-inline-start: none;
    border-inline-end: none;
}

/* The icon: size-4, and it follows the link's ink rather than carrying its own drawer-icon colour. */
.mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-icon {
    margin: 0;
    min-width: 0;
    color: inherit;
}

/* size-4. MudNavLink puts .mud-nav-link-icon and .mud-icon-root on the SAME svg, so this is one element, not two — and the size classes it also carries (.mud-icon-size-medium, 24px) set width and height, not font-size. */
.mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-icon.mud-icon-root {
    inline-size: 1rem;
    block-size: 1rem;
    font-size: 1rem;
}

.mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-text {
    /* MudBlazor spaces the label off the icon with its own margin-inline-start, which stacked on the row's flex `gap` and put every label 12px to the right of where the group captions below start. The gap is the one doing the spacing now. */
    margin: 0;
    white-space: nowrap;
}

/* The group caption. Its chevron rotates; the metrics match an item so the accordion header does not read as a different kind of row. */
.mud-navmenu .mud-nav-link-expand-icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    font-size: 0.875rem;
    transition: transform var(--duration-default) var(--ease-out-cubic);
}

/* A plain group label — the `Typo.overline` heading over a run of links; mono crumb, same as a table header, so the two read as one system.
   The start padding is the item's own 0.75rem, no more — that puts the caption on the ICON column, flush with the icons below it, which is where the platform's section header starts too (a full row of icon, caption, chevron, so its left edge is the icon column even though its caption text sits one column further in).
   Indenting the caption to the label column instead was tried and read as wrong: with no icon of its own to anchor it, the caption floated in the middle of the rail while every item below it started at the edge — the platform's caption only survives that indent because an icon holds the column open; ours has none, so it takes the edge. */
.mud-drawer .mud-navmenu .mud-typography-overline {
    display: block;
    padding: 0.875rem 0.75rem 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.65625rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--muted-foreground);
}

/* SHELL CHROME ← layout/topbar.tsx + layout/sidebar.tsx. Topbar: h-14 border-b, background at 80% with a backdrop blur, px-3 md:px-5. Rail: border-r, card at 85% with backdrop-blur-xl + saturate-150.
   The translucency is the point: content reads as passing underneath the chrome rather than stopping at it. */

.mud-appbar {
    border-bottom: 1px solid var(--border);
    background-color: oklch(from var(--background) l c h / 0.8);
    backdrop-filter: blur(8px);
    box-shadow: none;
}

.mud-appbar .mud-toolbar {
    padding-inline: 0.75rem;
    gap: 0.5rem;
}

@media (min-width: 960px) {
    .mud-appbar .mud-toolbar {
        padding-inline: 1.25rem;
    }
}

.mud-drawer {
    border-inline-end: 1px solid var(--border);
    /* --surface-glass is the card tier at 85%; the sheet leaves the blur to the element, which is what makes the rail read as glass. */
    background-color: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: none;
}

/* The rail is a flex column: the nav takes the slack so AppShell's footer can pin itself to the bottom with `margin-top: auto`. Without this the footer sits directly under the last nav item. */
.mud-drawer .mud-navmenu {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Main content scrolls on its own, the way the platform's <main> does (`flex-1 overflow-auto`). Page padding is PageContainer's job, not this one's. */
.mud-main-content.ark-shell-main {
    overflow-y: auto;
}

/* The phone's content band, clear of both fixed bars — the insets are already inside each bar's own height, so they're added again here rather than assumed.
   Global rather than scoped to AppShell.razor.css: this class lands on the div MudMainContent renders, which carries no CSS-isolation scope attribute, so the scoped rule it used to live in never matched anything at all. */
.mud-main-content.ark-shell-body {
    padding-top: calc(3.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}

/* narrow web: the platform's 52px icon rail — the platform collapses its rail to 52px on a narrow window; this shell's rail is fixed open because the markup is static and cannot host a toggle, so the collapse is done in CSS instead: one variable moves the rail, the bar and the content together, since MudBlazor derives all three widths from it.
   Set on `body .mud-layout` rather than `:root`: MudThemeProvider injects its own `:root` block into the document body, later than this sheet, and would win a specificity tie on source order — the extra element outranks it instead. */
@media (max-width: 959.95px) {
    body .mud-layout {
        --mud-drawer-width-left: 52px;
    }

    /* No room for a label at 52px. The icon stays centred, and MudNavLink's own title attribute is what names the destination. */
    body .mud-layout .mud-navmenu .mud-nav-link {
        justify-content: center;
        padding-inline: 0;
    }

    body .mud-layout .mud-navmenu .mud-nav-link .mud-nav-link-text,
    body .mud-layout .mud-navmenu .mud-typography-overline,
    body .mud-layout .ark-rail-foot {
        display: none;
    }
}

/* The topbar's profile menu. The popover is MudBlazor's own markup, so its width cannot be set from UserMenu.razor.css — a scoped selector never reaches it. */
.mud-popover.ark-user-menu {
    inline-size: 240px;
}

.mud-popover.ark-user-menu .mud-list {
    padding-block: 0;
}

.mud-popover.ark-user-menu .mud-list-item {
    margin-inline: 0.25rem;
}

/* Sign out is the one destructive row in the menu. */
.mud-popover.ark-user-menu .mud-list-item.ark-user-menu-danger,
.mud-popover.ark-user-menu .mud-list-item.ark-user-menu-danger .mud-icon-root {
    color: var(--destructive);
}

.mud-popover.ark-user-menu .mud-list-item.ark-user-menu-danger:hover {
    background-color: oklch(from var(--destructive) l c h / 0.1);
}

/* TOAST ← the platform's sonner treatment, applied to MudSnackbar. A calm card with a single 3px tone stripe on the left edge, inset from the ends so it reads as a marker rather than as a border — no blur, no glow.
   Keyed on `.mud-snackbar` alone: MudBlazor 9.7 stopped emitting `mud-snackbar-surface`, so anything keyed on that class matches nothing and the toast falls back to MudBlazor's raw filled-severity slab. */

.mud-snackbar {
    position: relative;
    overflow: hidden;
    padding: 0.875rem 1rem 0.875rem 1.125rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-lift);
    font-size: var(--text-sm);
    line-height: 1.45;
}

/* The stripe. Tone comes from the severity class MudBlazor puts on the same element, defaulting to foreground ink when there is none. */
.mud-snackbar::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 10px;
    inline-size: 3px;
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    background-color: var(--foreground);
}

.mud-snackbar.mud-alert-filled-success::before,
.mud-snackbar.mud-alert-text-success::before { background-color: var(--success); }

.mud-snackbar.mud-alert-filled-warning::before,
.mud-snackbar.mud-alert-text-warning::before { background-color: var(--warning); }

.mud-snackbar.mud-alert-filled-info::before,
.mud-snackbar.mud-alert-text-info::before { background-color: var(--info); }

.mud-snackbar.mud-alert-filled-error::before,
.mud-snackbar.mud-alert-text-error::before { background-color: var(--destructive); }

/* The severity icon takes the tone; the message stays in foreground ink so it is read as a sentence rather than as a coloured label. */
.mud-snackbar .mud-snackbar-icon { color: var(--muted-foreground); }
.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-success .mud-snackbar-icon { color: var(--success); }
.mud-snackbar.mud-alert-filled-error .mud-snackbar-icon,
.mud-snackbar.mud-alert-text-error .mud-snackbar-icon { color: var(--destructive); }

.mud-snackbar .mud-snackbar-content-message {
    color: var(--foreground);
}

/* ODDS AND ENDS. Tooltip: rounded-md border bg-popover px-2 py-1 text-xs shadow-md. */
.mud-tooltip {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-md);
    font-size: var(--text-xs);
    line-height: 1.3;
    opacity: 1;
}

/* Progress: a 2px hairline, not a 4px Material bar. */
.mud-progress-linear {
    block-size: 2px;
    border-radius: 9999px;
    overflow: hidden;
}

/* Divider on the token hairline rather than MudBlazor's own line colour. */
.mud-divider {
    border-color: var(--border);
}

/* MudBlazor's overline typo is the app's mono crumb wherever it appears, not only in the rail. */
.mud-typography-overline {
    font-family: var(--font-mono);
    font-size: 0.65625rem;
    font-weight: 500;
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    line-height: 1;
    color: var(--muted-foreground);
}

/* An avatar is a square tile with a brand-tinted fill, the way the topbar's profile tile is — MudBlazor defaults it to a circle. */
.mud-avatar {
    border-radius: var(--radius-md);
    background-color: oklch(from var(--primary) l c h / 0.15);
    color: var(--primary);
    /* Same treatment as the two hand-rolled initials tiles (.ark-user-tile, .ark-topbar-avatar): the display face at its only real weight, opened up. */
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.04em;
}

/* PAGE ← layout/app-shell.tsx <main> + the platform's page header. main: p-4 md:p-6. head: the title row — a 24px display title with a muted lede under it, and the page's actions pushed to the trailing edge.
   Global rather than a PageContainer.razor.css: `.ark-page` lands on the div MudContainer renders, which carries no CSS-isolation scope attribute — keeping the whole family here rather than splitting it across two files. */

.mud-container.ark-page {
    padding-block: 1rem;
    padding-inline: 1rem;
    /* Left-anchored, not centred: MudContainer centres itself with auto margins, so a page asking for a narrower MaxWidth (Settings is Medium, Change password is Small) had its left edge somewhere else — the page title jumped sideways as you moved between screens.
       The platform's <main> is left-aligned and a narrow form constrains its own width instead; MaxWidth still caps the measure, it just no longer moves the page. */
    margin-inline: 0;
}

/* A filter row mixes bare buttons with labelled fields: the label is its own row above the field, so the field's column is taller and `align-items: center` floats the buttons off the field's centre line (they end up a few pixels high) — end-align so every control in the row sits on the field's baseline.
   Scoped tightly: only inside a page container, only a centred flex row that actually contains a MudBlazor field — `.d-flex.align-center` is a MudBlazor utility used all over the app, and this must not reach rows that hold no field. */
.ark-page .d-flex.align-center:has(.mud-input-control) {
    /* !important because MudBlazor's utility classes are declared that way — no selector, however specific, beats `.align-center{align-items:center!important}` without it. */
    align-items: flex-end !important;
}

@media (min-width: 960px) {
    .mud-container.ark-page {
        padding-block: 1.5rem;
        padding-inline: 1.5rem;
    }
}

/* The way out of a sub-page: a chevron and the destination's name, above the title. Sits in the muted ink so it reads as navigation rather than as a heading, and names where it goes ("Profile") rather than the action ("Back"). */
.ark-page-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-block-end: 0.75rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out-cubic),
                color var(--duration-fast) var(--ease-out-cubic);
}

.ark-page-back svg {
    inline-size: 1rem;
    block-size: 1rem;
    flex-shrink: 0;
}

.ark-page-back:hover {
    background-color: var(--accent);
    color: var(--foreground);
}

.ark-page-back:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.ark-page-head {
    display: flex;
    /* Wraps, because the Actions slot does not shrink (see below): on a phone-width window the title and a date picker cannot both hold the row — without this the title block was squeezed to zero and the field ran off the side of the page; wrapped, the actions drop to their own line under the title. */
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.5rem;
}

/* The basis is what triggers the wrap: min-width: 0 alone lets the title block shrink for ever, so the row never runs out of space and never breaks; asking for 16rem means the actions wrap once the two no longer fit. It still grows past 16rem on a wide page, which is what keeps the actions pinned to the trailing edge. */
.ark-page-head-text {
    flex: 1 1 16rem;
    min-width: 0;
}

/* A field in the head's Actions slot sizes to itself: MudBlazor's input control is `flex: 1 1 auto`, so a lone date picker up there grew to fill every pixel the title left over — 838px of field on a 1054px row; the page's own `min-width` / `max-width` on the picker is what should decide its measure. */
.ark-page-head .mud-input-control,
.ark-page-head .mud-picker {
    flex: 0 0 auto;
}

/* text-sm leading-relaxed text-muted-foreground */
.ark-page-lede {
    margin: 0.375rem 0 0;
    max-inline-size: 60ch;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* SIGNED OUT — what a page shows when its data came back 401. Same shape as EmptyState (glyph, sentence, hint) with the one action that fixes it underneath.
   Here rather than in a PageContainer.razor.css because the rest of the .ark-page family already lives in this block; see the note above. */

.ark-signed-out {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3.5rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--card);
    text-align: center;
}

.ark-signed-out .ark-signed-out-glyph {
    color: var(--muted-foreground);
    opacity: 0.45;
}

.ark-signed-out-title {
    margin: 0;
    color: var(--foreground);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.ark-signed-out-hint {
    margin: 0;
    max-inline-size: 40ch;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* The filled brand button, hand-rolled: this is an anchor, and it has to work on a page whose interactivity may be exactly what has just died. */
.ark-signed-out-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.25rem;
    margin-block-start: 0.75rem;
    padding: 0 1.25rem;
    border-radius: var(--radius-md);
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
    transition: filter var(--duration-fast) var(--ease-out-cubic);
}

.ark-signed-out-action:hover {
    filter: brightness(1.05);
}

.ark-signed-out-action:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ark-signed-out-action {
        transition: none;
    }
}

/* A heading for a band within a page — one step down from .ark-page-head's title, and the thing that stops a long page reading as one undifferentiated column. An h2, so the display face and its tracking come from the heading rule in ark-base.css. */
.ark-section-title {
    margin: 0 0 0.75rem;
    font-size: var(--text-display-section);
    line-height: 1.2;
    color: var(--foreground);
}

/* STAT TILE — a count with its name over it; sits on a MudPaper, so it inherits the card's hairline and fill and only has to arrange what is inside.
   Global rather than a page's own stylesheet, for the same reason .ark-page is: the class lands on the div MudPaper renders, which carries no CSS-isolation scope attribute. */

.mud-paper.ark-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
    min-block-size: 5.25rem;
    padding: 1rem 1.25rem;
    overflow: hidden;
}

/* The same 2px brand bar the nav rail pins to its active row and the phone's tab bar draws over its active tab. One cue, three places. */
.mud-paper.ark-stat::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 2px;
    background: var(--primary);
    opacity: 0.55;
}

.ark-stat-label {
    font-family: var(--font-mono);
    font-size: 0.65625rem;
    font-weight: 500;
    letter-spacing: var(--tracking-meta);
    line-height: 1;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

/* The number is the point of the tile, so it gets the display face at the page title's size — tabular, so a row of tiles keeps its digits on one grid. */
.ark-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-display-stat);
    font-weight: 400;
    letter-spacing: var(--tracking-display);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
}

/* A tile whose count is zero says less than one that is not. Muted rather than hidden: "no blackouts today" is still an answer. */
.mud-paper.ark-stat[data-stat-zero="true"] .ark-stat-value {
    color: var(--muted-foreground);
}

.mud-paper.ark-stat[data-stat-zero="true"]::before {
    opacity: 0.15;
}

/* PALETTE BRIDGE — MudBlazor's own variables, pointed at the Ark tokens. MudBlazor resolves its palette in C# and writes it into a `:root` block from MudThemeProvider, which only re-renders when the provider component is interactive — in this app's static shell it never is, so the palette was frozen on the LIGHT values while the token layer followed `data-theme` into dark: the visible result was a white data grid on a graphite page, and dark-on-dark ink anywhere this sheet hadn't already overridden a colour.
   Rather than chase each of those, this block makes the token layer the single source of truth for MudBlazor too: every line below points a `--mud-palette-*` name at an Ark semantic token, and because there is only one palette now, one block is all MudBlazor ever needs — there is no dark twin to maintain.
   ArkTheme.Create() in C# still supplies the same values for MudBlazor's internals that read the palette outside CSS, and it stays the reference; nothing here introduces a colour of its own.
   `html:root` rather than `:root`: MudThemeProvider injects its block into the BODY, so it loads after this sheet and would win a `:root` vs `:root` tie on source order — the extra element selector outranks it without reaching for !important. */

html:root {
    /* Brand */
    --mud-palette-primary: var(--primary);
    --mud-palette-primary-text: var(--primary-foreground);
    /* Same darken-on-press idiom Token.scss's --primary-active-color uses. */
    --mud-palette-primary-darken: var(--primary-active-color);
    --mud-palette-primary-lighten: var(--primary-hover);
    --mud-palette-primary-hover: var(--primary-soft);

    --mud-palette-secondary: var(--saffron);
    --mud-palette-secondary-text: var(--saffron-foreground);
    --mud-palette-secondary-darken: color-mix(in srgb, var(--saffron) 80%, black);
    /* Same lighten idiom Token.scss's --secondary-hover-color uses. */
    --mud-palette-secondary-lighten: var(--secondary-hover-color);

    --mud-palette-tertiary: var(--tertiary-color);
    --mud-palette-tertiary-text: var(--tertiary-foreground);

    /* Surfaces */
    --mud-palette-background: var(--background);
    --mud-palette-background-gray: var(--surface-4);
    --mud-palette-surface: var(--card);

    --mud-palette-appbar-background: var(--card);
    --mud-palette-appbar-text: var(--foreground);
    --mud-palette-drawer-background: var(--card);
    --mud-palette-drawer-text: var(--muted-foreground);
    --mud-palette-drawer-icon: var(--muted-foreground);

    /* Ink */
    --mud-palette-text-primary: var(--foreground);
    --mud-palette-text-secondary: var(--muted-foreground);
    --mud-palette-text-disabled: var(--text-muted);

    /* Lines. --border is the hairline the whole system draws; --input is the one a field wears, which is a step stronger. */
    --mud-palette-lines-default: var(--border);
    --mud-palette-lines-inputs: var(--input);
    --mud-palette-divider: var(--border);
    --mud-palette-divider-light: var(--border);

    --mud-palette-table-lines: var(--border);
    --mud-palette-table-hover: var(--accent);
    /* No zebra: the platform's table separates rows with a hairline, and a band on top of that reads as two competing grids. */
    --mud-palette-table-striped: transparent;

    /* Interaction. MudBlazor uses `action-default` for an idle icon and `action-default-hover` for the surface under a hovered control. */
    --mud-palette-action-default: var(--muted-foreground);
    --mud-palette-action-default-hover: var(--accent);
    --mud-palette-action-disabled: var(--text-muted);
    --mud-palette-action-disabled-background: var(--muted);

    /* State. A `-text` name is contrast ink for the solid fill, so it takes the `-foreground` token; the `-ink` tokens are for the 12% tint and resolve to the fill itself — an invisible message on a filled snackbar. */
    --mud-palette-success: var(--success);
    --mud-palette-success-text: var(--success-foreground);
    --mud-palette-success-hover: var(--success-bg);
    --mud-palette-warning: var(--warning);
    --mud-palette-warning-text: var(--warning-foreground);
    --mud-palette-warning-hover: var(--warning-bg);
    --mud-palette-error: var(--destructive);
    --mud-palette-error-text: var(--destructive-foreground);
    --mud-palette-error-hover: var(--danger-bg);
    --mud-palette-info: var(--info);
    --mud-palette-info-text: var(--info-foreground);
    --mud-palette-info-hover: var(--info-bg);

    --mud-palette-dark: var(--foreground);
    --mud-palette-dark-text: var(--background);

    /* Scrims. The dialog overlay is claimed in the DIALOG block above too; this is for MudBlazor's own uses of the token. */
    --mud-palette-overlay-dark: oklch(0 0 0 / 0.4);
    --mud-palette-overlay-light: oklch(1 0 0 / 0.4);
}

/* The `-rgb` triples are the one thing that cannot be derived: MudBlazor composes them as `rgba(var(--mud-palette-primary-rgb), 0.12)` for ripples and hover washes, which needs three bare numbers, and a CSS custom property holding an oklch() colour cannot be decomposed into them.
 * So these repeat the brand literals — the same values Token.scss documents for --pt-accent and --pt-accent-dim — and they are the only place in this sheet that does.
 */
html:root {
    --mud-palette-primary-rgb: 197, 255, 61; /* #c5ff3d · --pt-accent */
    --mud-palette-secondary-rgb: 138, 175, 42; /* #8aaf2a · --pt-accent-dim */
}