/* Let the document scrollbar fall back to the browser's native overlay one on touch devices.
   MudBlazor's theme injects `html, body * { scrollbar-color: ...; scrollbar-width: thin }`, and
   setting scrollbar-color forces Firefox into a classic, space-reserving scrollbar. That bar
   reserves about 6px on the root, so on Firefox for Android the page width jumps as the bar
   appears and the page never fills the viewport. Resetting these to their initial values on the
   root (`:root` out-weighs MudBlazor's `html`) drops the override, so Firefox uses its
   zero-width overlay scrollbar: the page fills, the width stays put, and the bar still appears
   on scroll. Desktop (pointer: fine) keeps MudBlazor's styled scrollbar. */
@media (pointer: coarse) {
    :root {
        scrollbar-color: auto;
        scrollbar-width: auto;
    }
}

/* Reserve the classic scrollbar's gutter on the root, so a page that grows past one screen no
   longer shrinks the centred content and nudges it left as the bar appears. Only classic,
   space-reserving scrollbars consume the gutter, so this is a no-op on the overlay scrollbars
   the touch path above opts into, leaving that behaviour untouched. */
:root {
    scrollbar-gutter: stable;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

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

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

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Static-SSR auth pages use plain inputs (Mud's interactive fields don't work in static SSR).
   These classes give them a usable look that fits next to the Mud chrome around them. The
   colours come from the active Mud palette so they follow light and dark alike (a couple sit
   a shade off the old hand-picked values: text-secondary is rgba(0,0,0,.54) not .6, and
   primary-darken is Mud's computed hover shade rather than #4a3ed0). */
.auth-form .auth-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.auth-form .auth-input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background-color: transparent;
}

.auth-form .auth-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    border-width: 2px;
    padding: 9px 11px;
}

.auth-form .auth-submit {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.auth-form .auth-submit:hover {
    background-color: var(--mud-palette-primary-darken);
}

/* The destructive submit on Settings (delete account). */
.auth-form .auth-submit-danger {
    color: var(--mud-palette-error-text);
    background-color: var(--mud-palette-error);
}

.auth-form .auth-submit-danger:hover {
    background-color: var(--mud-palette-error-darken);
}

/* The one-time API token: wrap the long string inside the alert, and select it whole on
   a click so it copies without fiddly dragging. */
.pat-token {
    overflow-wrap: anywhere;
    user-select: all;
}

/* The shared block style (design: Visual style): bordered, slightly rounded, transparent
   blocks; header and footer rows inside a block get the muted background and a separating
   line, and list rows separate with lines. Palette variables keep both themes right. */
.block {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    /* The header's and rows' fills must not poke past the rounded corners. */
    overflow: hidden;
}

.block-header {
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.block-rows > * + * {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* A block that is only its header (the Item screen's collapsed scores strip) has no
   contents to separate from; the block's own border is its bottom edge. */
.block > .block-header:last-child {
    border-bottom: none;
}

/* A block's control strip at the bottom (Home's page menu): the header treatment, mirrored. */
.block-footer {
    background-color: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* The score field is a container, not an input: its OWN border must not react to hover
   or focus. The direct-child chain pins just the field's border - the selects inside
   still highlight like any other input - and mirroring MudBlazor's selectors keeps the
   specificity above theirs. */
.score-field > .mud-input-control-input-container > .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover > .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
}

.score-field > .mud-input-control-input-container > .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--mud-palette-lines-inputs);
}

/* The score field's value row toggles the editor like a dropdown, so the whole line
   invites the click. */
.score-field-toggle {
    cursor: pointer;
}

/* The score editor's selects, two-up: benefits down the left, costs down the right. */
.score-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
}

/* The score editor's section dividers carry their section's name (Basic, Detailed):
   a muted caption centred between two rules, matching MudDivider's line colour. */
.score-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.score-divider::before,
.score-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--mud-palette-divider);
}

/* A Home row to draw the eye to: a rank that just moved after a score edit, or an item just
   captured and landed at its position. Two brief pulses then a fade, so the user sees where it
   is. The colour is the active palette's primary. Under prefers-reduced-motion the animation
   becomes a static highlight instead. */
.rank-moved {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25);
}

@media (prefers-reduced-motion: no-preference) {
    .rank-moved {
        background-color: transparent;
        animation: rank-moved-fade 2s ease-out;
    }
}

@keyframes rank-moved-fade {
    0% {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.4);
    }

    18% {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
    }

    36% {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.4);
    }

    100% {
        background-color: transparent;
    }
}

/* The count chips on Home's list header: the word and its count pill are one click target,
   so the wrapper is a reset button. The pill's tint comes from the palette's text colours,
   swapping to the primary tint while the chip's state is in the active query. */
.state-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border: none;
    background: transparent;
    font: inherit;
    /* After the button-reset shorthand, which would otherwise put the word at body size. */
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    /* Keep each chip at its natural width and on one line inside the scrolling row. */
    flex: none;
    white-space: nowrap;
}

/* The chips sit in one left-aligned row that grows to fill the header and scrolls
   horizontally when it cannot fit them all. The scrollbar is hidden (touch and trackpad
   still scroll); min-width: 0 lets the row shrink below its content so the overflow
   scrolls rather than pushing the three-dots menu off the right. */
.chip-row {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}

.chip-row::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.state-chip-count {
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.08);
}

.state-chip-active {
    color: var(--mud-palette-primary);
}

.state-chip-active .state-chip-count {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* The tools menu's count chip while something is waiting: tinted to match the dot on the
   menu's activator icon. At zero it stays the neutral pill above. */
.menu-chip-alert {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
    color: var(--mud-palette-primary);
}

/* The tools icon's dot sits on the glyph's top-right corner, a hair over the edge; the stock
   overlap inset leaves it out on the icon button's padding. The extra classes outweigh
   MudBlazor's own four-class positioning rule. The ring in the bar's own text colour keeps
   the primary-filled dot visible on the primary app bar. */
.mud-badge.mud-badge-dot.mud-badge-overlap.tools-dot {
    inset: auto auto calc(100% - 16px) calc(100% - 16px);
    box-shadow: 0 0 0 1.5px var(--mud-palette-appbar-text);
}

/* Home list rows: the clamped title over the number/date subline. */
.item-row-link {
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

/* min-width lets these flex items shrink below their nowrap content, or the title's
   ellipsis never kicks in. */
.item-row-text {
    min-width: 0;
}

.item-row-clamp {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The quotes (and any cut ellipsis) around a derived auto title: machine decoration,
   fainter than secondary text so the derived words keep the line's focus. */
.auto-title-mark {
    color: var(--mud-palette-text-disabled);
}

/* Rendered Markdown bodies (descriptions and comments). Headings scale to comment size -
   an h1 in a comment shouldn't rival the page title - and the colours follow the active
   Mud palette. Trailing margins drop so a body ends flush with its block's padding. */
.markdown-body > *:last-child {
    margin-bottom: 0;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body table {
    margin: 0 0 8px;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin: 12px 0 8px;
    font-weight: 500;
    line-height: 1.4;
}

.markdown-body > h1:first-child,
.markdown-body > h2:first-child,
.markdown-body > h3:first-child {
    margin-top: 0;
}

.markdown-body h1 {
    font-size: 1.25rem;
}

.markdown-body h2 {
    font-size: 1.15rem;
}

.markdown-body h3 {
    font-size: 1.05rem;
}

.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    font-size: 1rem;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 24px;
}

.markdown-body code {
    padding: 1px 4px;
    border-radius: 4px;
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.08);
    font-size: 0.875em;
}

.markdown-body pre {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 4px;
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.08);
    overflow-x: auto;
}

.markdown-body pre code {
    padding: 0;
    background-color: transparent;
}

.markdown-body blockquote {
    margin: 0 0 8px;
    padding: 0 12px;
    border-left: 3px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.markdown-body table {
    border-collapse: collapse;
}

.markdown-body th,
.markdown-body td {
    padding: 4px 10px;
    border: 1px solid var(--mud-palette-table-lines);
}

.markdown-body img {
    max-width: 100%;
}

/* The "edited by" popup listing a description's or comment's prior versions. */
.revisions-menu {
    min-width: 280px;
    max-width: min(480px, 90vw);
}

/* The edited marker: an inline text trigger that flows and wraps with the header line
   around it instead of sitting as a button. */
.revisions-trigger {
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.revisions-trigger:hover {
    text-decoration: underline;
}

/* The small AI chip marking a write that declared an agent co-author. A hand-rolled span
   because it must sit inside flowing text, where MudChip's div cannot. */
.ai-chip {
    display: inline-block;
    padding: 0 4px;
    margin-left: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    font-size: 0.625rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray);
    vertical-align: text-bottom;
}

/* The item timeline: a vertical rule down the left with each event's emoji sitting on it as
   a node (page-background circle so the line doesn't run through the glyph); comment blocks
   span the full width and, being positioned, paint over the absolutely positioned rule. */
.timeline {
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 14px;
    width: 2px;
    background-color: var(--mud-palette-lines-default);
}

.timeline-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    background-color: var(--mud-palette-background);
    border-radius: 50%;
}

/* An icon standing in running text (suggestion rows, rendered reference links): sized
   from the surrounding font and pulled down so its glyph sits optically centred on the
   lowercase body. Beats mud-icon-size-* only because app.css loads after
   MudBlazor.min.css - same specificity, later sheet. */
.text-icon {
    font-size: 1.25em;
    vertical-align: -0.25em;
}

/* The sorted-criterion badge ("Effort 3") on a list row: never wraps mid-badge - the
   clamped title absorbs the width instead. */
.row-badge {
    white-space: nowrap;
}

.timeline-comment {
    position: relative;
    /* Blocks are transparent; the comment must still paint over the timeline's rule. */
    background-color: var(--mud-palette-background);
}

/* The `#` reference picker: the wrapper anchors the suggestion panel, which sits at the
   caret's measured position (ReferenceTextField.razor.js keeps its width in step). */
.ref-field {
    position: relative;
}

/* Match the app's 14px body text (MudBlazor's textarea is font: inherit, so it otherwise
   takes the ambient 16px root size rather than the theme's Body1), and let the writer drag
   the box taller. The resize is manual only, not the auto-grow the field deliberately avoids
   (that remeasures on every keystroke and makes Firefox Android scroll per character), so it
   is safe here. */
.ref-field .mud-input textarea.mud-input-root {
    font-size: 0.875rem;
    resize: vertical;
}

/* MudBlazor's outlined textarea reserves 18.5px above and below for a floating label this
   field does not use, which leaves the text marooned in the middle. Trim it to a snug 8px
   top and bottom, keeping the 14px sides. */
.ref-field .mud-input textarea.mud-input-root-outlined {
    margin-top: 8px;
    padding: 0 14px 8px;
}

.ref-suggest {
    position: absolute;
    z-index: 10;
    width: 260px;
    padding: 4px 0;
}

.ref-suggest-option {
    padding: 6px 12px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ref-suggest-highlight {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.ref-suggest-number {
    color: var(--mud-palette-text-secondary);
}

/* The copyright footer sits at the viewport bottom on short pages and after the content
   on long ones: the layout becomes a full-height column and the content flexes to fill.
   The SMALL viewport unit keeps "full height" honest on mobile: 100vh measures the space
   behind the browser's retractable toolbar and forces a scroll even on empty pages, and
   100dvh does the same on Firefox for Android, which sizes dvh as if the toolbar were
   hidden (Mozilla bug 1774224) - leaving every page a toolbar-height too tall, the footer
   and FAB below the fold, and the height mismatch feeding its pinch-zoom minimum so pages
   could zoom out past fit. svh is static and right on every engine; with the toolbar
   hidden the footer just sits that little above the bottom. Older browsers ignore the
   second declaration and keep the classic fallback. */
.mud-layout {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.mud-main-content {
    flex: 1;
}

.app-footer {
    padding: 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* Screen-reader-only text: used for a page's <h1> when the design has no visible heading. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Subtle scrim behind an open top-bar dropdown. AppBarMenu renders this div while the menu
   is open; it covers the viewport and dims the page. The z-index sits just below the app bar
   (--mud-zindex-appbar: 1100) so the bar stays bright, and below the menu popover (1400) so
   the menu stays legible. Tuned per theme: the same value applies under
   html[data-appearance="dark"], and for system-resolving-to-dark inside the
   prefers-color-scheme block below. */
.appbar-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background-color: rgba(0, 0, 0, 0.16);
}

html[data-appearance="dark"] .appbar-menu-scrim {
    background-color: rgba(0, 0, 0, 0.42);
}

/* System preference resolving to dark. Only the browser can know this on the static auth
   pages (no circuit, no JS), so these mirror the values MudThemeProvider emits for the
   stock dark palette; explicit light/dark never reaches this rule - the provider handles
   those server-side, and html[data-appearance="system"] out-specifies its :root block.
   Regenerate on MudBlazor upgrades by diffing the provider's emitted :root block under
   `Cookie: appearance=dark` against a no-cookie response, keeping the lines that differ. */
@media (prefers-color-scheme: dark) {
    html[data-appearance="system"] {
        --mud-native-html-color-scheme: dark;
        --mud-palette-action-default-hover: rgba(173,173,177,0.058823529411764705);
        --mud-palette-action-default: rgba(173,173,177,1);
        --mud-palette-action-disabled-background: rgba(255,255,255,0.11764705882352941);
        --mud-palette-action-disabled: rgba(255,255,255,0.25882352941176473);
        --mud-palette-appbar-background: rgba(39,39,47,1);
        --mud-palette-appbar-text: rgba(255,255,255,0.6980392156862745);
        --mud-palette-background-gray: rgba(39,39,47,1);
        --mud-palette-background: rgba(50,51,61,1);
        --mud-palette-black: rgba(39,39,47,1);
        --mud-palette-dark-darken: rgb(23,23,28);
        --mud-palette-dark-hover: rgba(39,39,47,0.058823529411764705);
        --mud-palette-dark-lighten: rgb(56,56,67);
        --mud-palette-dark-rgb: 39,39,47;
        --mud-palette-dark: rgba(39,39,47,1);
        --mud-palette-divider-light: rgba(255,255,255,0.058823529411764705);
        --mud-palette-divider-rgb: 255,255,255;
        --mud-palette-divider: rgba(255,255,255,0.11764705882352941);
        --mud-palette-drawer-background: rgba(39,39,47,1);
        --mud-palette-drawer-icon: rgba(255,255,255,0.4980392156862745);
        --mud-palette-drawer-text: rgba(255,255,255,0.4980392156862745);
        --mud-palette-error-darken: rgb(244,47,70);
        --mud-palette-error-hover: rgba(246,78,98,0.058823529411764705);
        --mud-palette-error-lighten: rgb(248,119,134);
        --mud-palette-error-rgb: 246,78,98;
        --mud-palette-error: rgba(246,78,98,1);
        --mud-palette-info-darken: rgb(10,133,255);
        --mud-palette-info-hover: rgba(50,153,255,0.058823529411764705);
        --mud-palette-info-lighten: rgb(92,173,255);
        --mud-palette-info-rgb: 50,153,255;
        --mud-palette-info: rgba(50,153,255,1);
        --mud-palette-lines-default: rgba(255,255,255,0.11764705882352941);
        --mud-palette-lines-inputs: rgba(255,255,255,0.2980392156862745);
        --mud-palette-primary-darken: rgb(90,75,226);
        --mud-palette-primary-hover: rgba(119,107,231,0.058823529411764705);
        --mud-palette-primary-lighten: rgb(151,141,236);
        --mud-palette-primary-rgb: 119,107,231;
        --mud-palette-primary: rgba(119,107,231,1);
        --mud-palette-skeleton: rgba(255,255,255,0.10980392156862745);
        --mud-palette-success-darken: rgb(9,154,108);
        --mud-palette-success-hover: rgba(11,186,131,0.058823529411764705);
        --mud-palette-success-lighten: rgb(13,222,156);
        --mud-palette-success-rgb: 11,186,131;
        --mud-palette-success: rgba(11,186,131,1);
        --mud-palette-surface-rgb: 55,55,64;
        --mud-palette-surface: rgba(55,55,64,1);
        --mud-palette-table-lines: rgba(255,255,255,0.11764705882352941);
        --mud-palette-table-striped: rgba(255,255,255,0.2);
        --mud-palette-text-disabled-rgb: 255,255,255;
        --mud-palette-text-disabled: rgba(255,255,255,0.2);
        --mud-palette-text-primary-rgb: 255,255,255;
        --mud-palette-text-primary: rgba(255,255,255,0.6980392156862745);
        --mud-palette-text-secondary-rgb: 255,255,255;
        --mud-palette-text-secondary: rgba(255,255,255,0.4980392156862745);
        --mud-palette-warning-darken: rgb(214,143,0);
        --mud-palette-warning-hover: rgba(255,168,0,0.058823529411764705);
        --mud-palette-warning-lighten: rgb(255,182,36);
        --mud-palette-warning-rgb: 255,168,0;
        --mud-palette-warning: rgba(255,168,0,1);
    }

    /* Match the explicit-dark scrim when the system preference resolves to dark. */
    html[data-appearance="system"] .appbar-menu-scrim {
        background-color: rgba(0, 0, 0, 0.42);
    }
}