@import url("./css/base.css");
@import url("./css/animations.css");
@import url("./css/mud-overrides.css");
@import url("./css/utilities.css");
@import url("./css/transition-output-editor.css");
@import url("./css/loading.css");
@import url("./css/wizard.css");

html,
body {
    height: 100%;
}

h1:focus {
    outline: none;
}

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

/* Override MudBlazor's hardcoded icon size in compact menus */
.editor-compact-menu .mud-menu-item .mud-menu-item-icon.mud-icon-size-medium {
    font-size: 0.875rem !important;
}

.mud-list-item.mud-selected,
.mud-list-item.active-menu-item,
.mud-menu-item.active-menu-item {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

.mud-list-item.mud-selected:hover,
.mud-list-item.active-menu-item:hover,
.mud-menu-item.active-menu-item:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) !important;
}

.lib-sort-list .mud-menu-item:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.mud-button-root {
    text-transform: none !important;
}

.mud-button-filled.mud-button-filled-default {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-background) 8%) !important;
    color: var(--mud-palette-text-primary) !important;
}

.mud-button-filled.mud-button-filled-default:hover {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 85%, var(--mud-palette-background) 15%) !important;
}

.mud-button-filled.mud-button-filled-primary {
    color: var(--mud-palette-surface) !important;
}

.secondary-btn {
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary) !important;
    background-color: transparent !important;
}

.secondary-btn:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.danger-btn {
    border-color: var(--mud-palette-error) !important;
    color: var(--mud-palette-error) !important;
    background-color: color-mix(in srgb, var(--mud-palette-error) 8%, transparent) !important;
}

.danger-btn:hover {
    background-color: color-mix(in srgb, var(--mud-palette-error) 18%, transparent) !important;
}

.danger-btn.mud-button-root.mud-button-filled {
    background-color: var(--mud-palette-error) !important;
    border-color: var(--mud-palette-error) !important;
    color: var(--mud-palette-error-text, #fff) !important;
}

.danger-btn.mud-button-root.mud-button-filled:hover {
    background-color: color-mix(in srgb, var(--mud-palette-error) 85%, black) !important;
    border-color: color-mix(in srgb, var(--mud-palette-error) 85%, black) !important;
}

.mud-input-control>.mud-input-control-input-container>.mud-input.mud-input-outlined {
    background-color: var(--mud-palette-background) !important;
    border-radius: var(--mud-default-borderradius) !important;
}

.mud-input-control>.mud-input-control-input-container>.mud-input.mud-input-outlined:focus-within {
    background-color: var(--mud-palette-background) !important;
}

.mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs) !important;
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
}

.mud-split-panel .divider.horizontal {
    height: 5px;
    flex-shrink: 0;
    background-color: transparent;
    transition: background-color 0.2s;
    cursor: row-resize;
}

.mud-split-panel .divider.horizontal:hover {
    background-color: var(--mud-palette-primary);
}

.bottom-splitter-collapsed.mud-split-panel>.divider {
    display: none !important;
}

.bottom-splitter-collapsed.mud-split-panel>.child-panel:last-child {
    display: none !important;
}

.bottom-splitter-collapsed.mud-split-panel>.child-panel:first-child {
    flex: 1 1 auto !important;
    max-height: unset !important;
}

.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chapter-clickable-wrapper {
    cursor: pointer;
}

.chapter-item-paper {
    border: 1px solid var(--mud-palette-divider);
    background-color: color-mix(in srgb, var(--mud-palette-surface) 50%, var(--mud-palette-background)) !important;
    border-left: 3px solid var(--mud-palette-divider) !important;
    transition: border-color 0.15s ease;
    min-height: 72px;
}

.chapter-clickable-wrapper:hover .chapter-item-paper {
    border-left-color: var(--mud-palette-primary) !important;
}

.chapter-clickable-wrapper--active .chapter-item-paper {
    border-left-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

.chapter-item-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.chapter-clickable-wrapper:hover .chapter-item-actions {
    opacity: 1;
}

.chapter-clickable-wrapper--active .chapter-item-actions {
    opacity: 1;
}

.chapter-item-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 1.25em;
}

.chapter-item-desc-placeholder {
    min-height: 1.25em;
}

.chapter-active-chip {
    height: 18px !important;
    font-size: 0.65rem !important;
    padding: 0 6px !important;
    margin: 0 !important;
}

.media-flush {
    --media-frame-border: none;
    --media-frame-radius: 0;
}

.epos-toggle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
}

.epos-toggle-row .epos-toggle-label {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
}


.mud-picker-inline-paper {
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius) !important;
    box-shadow: var(--mud-elevation-2) !important;
    background-color: var(--mud-palette-surface) !important;
}

.mud-picker-inline-paper .mud-picker-content {
    padding: 8px !important;
}

.mud-picker-calendar-header .mud-icon-button,
.mud-picker-calendar-header-switch .mud-icon-button,
.mud-picker-nav-button .mud-icon-button,
.mud-picker-calendar-header-transition + .mud-icon-button {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 50%;
}

.mud-picker-calendar-header .mud-icon-button:hover,
.mud-picker-calendar-header-switch .mud-icon-button:hover,
.mud-picker-nav-button .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
}

.mud-picker-calendar-day.mud-current {
    color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

.row-icon {
    font-size: 13px;
}

/* Admin users, authors & stories tables */
.admin-table-wrapper {
    position: relative;
}

/* Skeleton rows render in the table body (LoadingContentBody); suppress MudTable's own
   progress-line row so only the column-title header + skeleton rows show while loading. */
.admin-table-wrapper .mud-table-loading-row {
    display: none;
}

/* Reorder loading state: keep the real rows (so column widths never reflow), hide their
   content and overlay a shimmering bar per cell — a skeleton that cannot shift the table. */
.admin-table-wrapper.is-sorting tbody td {
    position: relative;
    color: transparent !important;
}

.admin-table-wrapper.is-sorting tbody td > * {
    visibility: hidden;
}

.admin-table-wrapper.is-sorting tbody td::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    height: 13px;
    transform: translateY(-50%);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 11%, transparent);
    animation: admin-sort-shimmer 1.1s ease-in-out infinite;
}

@keyframes admin-sort-shimmer {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-table-wrapper.is-sorting tbody td::after {
        animation: none;
    }
}

.admin-sort-header__icon {
    font-size: 14px !important;
    color: var(--mud-palette-text-secondary) !important;
    opacity: 0.3;
    transition: opacity 0.15s ease;
}

.admin-sort-header:hover .admin-sort-header__icon {
    opacity: 0.65;
}

/* The active arrow spins into place on each sort click. The header @key's the icon
   on the sort state so it re-mounts and the keyframe replays every time. */
.admin-sort-header--active .admin-sort-header__icon {
    opacity: 1;
    color: var(--mud-palette-text-primary) !important;
    animation: admin-sort-spin 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-sort-header--active .admin-sort-header__icon--desc {
    transform: rotate(180deg);
    animation: admin-sort-spin-desc 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes admin-sort-spin {
    from {
        transform: rotate(-120deg) scale(0.4);
        opacity: 0.2;
    }
    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@keyframes admin-sort-spin-desc {
    from {
        transform: rotate(60deg) scale(0.4);
        opacity: 0.2;
    }
    to {
        transform: rotate(180deg) scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sort-header--active .admin-sort-header__icon,
    .admin-sort-header--active .admin-sort-header__icon--desc {
        animation: none;
    }
}

.admin-clickable-table tbody tr {
    cursor: pointer;
}

.admin-table__col--w110 {
    width: 110px;
}

.admin-table__col--w120 {
    width: 120px;
}

.admin-table__col--w140 {
    width: 140px;
}

.admin-table__col--w150 {
    width: 150px;
}

.users-table__th--sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.users-table__th--min {
    width: 1%;
}

.users-table__td--top {
    vertical-align: middle;
}

.users-table__td--actions {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

.users-table__th--w25 {
    width: 25%;
}

.users-table__th--w30 {
    width: 30%;
}

.users-table__th--w140 {
    width: 140px;
}

.admin-table__th--min {
    width: 1%;
    white-space: nowrap;
}

.admin-table__th--sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.admin-table__td--chevron {
    text-align: right;
    width: 1%;
}

.admin-sort-header {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.admin-table__td--actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.admin-table__tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 2px 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-table__tag--genre {
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.admin-table__desc {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-table__author-cell {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
}

.admin-table__author-cell:hover {
    color: var(--mud-palette-secondary);
}

.admin-table__author-name {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.8125rem;
    color: inherit;
}

.admin-table__author-name-primary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-table__author-nick {
    font-size: 0.72rem;
    color: var(--mud-palette-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.admin-rating .mud-icon-root {
    font-size: 16px;
}

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

.fw-medium {
    font-weight: 500 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.admin-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.admin-toolbar__search {
    flex: 1 1 240px;
    max-width: 360px;
}

.admin-toolbar__genre {
    flex: 0 1 200px;
    max-width: 220px;
}

.admin-users-tabs > div:first-child {
    flex: 1 1 auto;
}

.admin-users-tabs .admin-toolbar__search {
    max-width: 760px;
}

.admin-users-tabs .tab-bar-group {
    margin-left: auto;
}

.admin-toolbar__count {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.admin-authors-toolbar__count {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 8px;
    background: var(--mud-palette-divider);
}

.admin-authors-toolbar__count-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.admin-authors-toolbar__count-skel {
    width: 62px;
    height: 13px;
}

.admin-pagination {
    display: flex;
    justify-content: center;
    padding: 12px;
    border-top: 1px solid var(--mud-palette-divider);
}

.nav-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 16px 14px 6px;
}

.pkgm-toolbar {
    overflow: hidden;
}

/* shared expand animation (matches chapter review) */
.pkgm-expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.pkgm-expand.open {
    grid-template-rows: 1fr;
}

.pkgm-expand__inner {
    overflow: hidden;
}

.pkgm-chevron {
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
    transition: transform 0.25s ease, opacity 0.15s ease;
}

.pkgm-chevron--open {
    transform: rotate(180deg);
    opacity: 0.9;
}

/* label chips (match chapter review row labels) */
.pkgm-label {
    flex: none;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.6;
}

.pkgm-label--chapter {
    background-color: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    color: var(--mud-palette-text-secondary);
}

.pkgm-label--story {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

/* chapter-review story grouping */
.review-group__band {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.review-group__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-group__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.review-group__title {
    min-width: 0;
    font-weight: 700;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-group__meta-line {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

/* the last chapter row's trailing divider would double up with the card border */
.review-group__rows > .mud-divider:last-child,
.chapter-review-list > .mud-divider:last-child {
    display: none;
}

/* story band (always open, non-interactive section header) */
.pkgm-story__band {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}

/* rebuild-in-progress indicator */
.pkgm-building {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-warning);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.pkgm-pill.pkgm-building {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
}

.pkgm-building__spinner {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    color: var(--mud-palette-warning);
    animation: pkgm-spin 0.9s linear infinite;
}

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

.pkgm-story__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pkgm-chapter__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}


.pkgm-story__info {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pkgm-story__title {
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pkgm-story__summary {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

.pkgm-story__pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.pkgm-pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.pkgm-pill--live {
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    color: var(--mud-palette-success);
}

.pkgm-pill--rc {
    background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);
    color: var(--mud-palette-info);
}

.pkgm-pill--attention {
    background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
    color: var(--mud-palette-warning);
}

.pkgm-pill--blocked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent);
    color: var(--mud-palette-error);
}

/* connected "build from snapshot" control */
.pkgm-build {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
}

.pkgm-build__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pkgm-build__btn + .pkgm-build__btn {
    border-left: 1px solid var(--mud-palette-lines-default);
}

.pkgm-build__btn:hover {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

.pkgm-build__icon {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}

.pkgm-pill__icon {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}

/* chapters */
.pkgm-chapters {
    border-top: 1px solid var(--mud-palette-divider);
}

.pkgm-chapter {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pkgm-chapter:last-child {
    border-bottom: none;
}

.pkgm-chapter__band {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 20px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pkgm-chapter__band:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 2%, transparent);
}

/* snapshot-only chapter: no package to expand */
.pkgm-chapter__band--static {
    cursor: default;
}

.pkgm-chapter__band--static:hover {
    background-color: transparent;
}

.pkgm-chevron--hidden {
    visibility: hidden;
}

.pkgm-chip--muted {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    color: var(--mud-palette-text-secondary);
}


.pkgm-chapter__info {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pkgm-chapter__title {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pkgm-chapter__snapshot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.pkgm-chapter__snapshot-icon {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}

.pkgm-chapter__chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* chips */
.pkgm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.pkgm-chip__icon {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

.pkgm-chip--live {
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    color: var(--mud-palette-success);
}

.pkgm-chip--rc {
    background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);
    color: var(--mud-palette-info);
}

.pkgm-chip--archived {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    color: var(--mud-palette-text-secondary);
}

.pkgm-chip--superseded {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning);
}

/* version rows */
.pkgm-versions {
    padding: 4px 18px 8px 54px;
}

.pkgm-version {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 4px;
    border-top: 1px solid var(--mud-palette-divider);
}

.pkgm-version:first-child {
    border-top: none;
}

.pkgm-version__content {
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pkgm-version__schema {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pkgm-version__schema--old {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.pkgm-version__meta {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pkgm-version__actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex: none;
}

.skel {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent);
    border-radius: 6px;
    flex: none;
}

.skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent),
        transparent);
    animation: skel-shimmer 1.4s ease-in-out infinite;
}

.skel--onDark {
    background-color: rgba(255, 255, 255, 0.09);
}

.skel--onDark::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
}

.skel--text {
    border-radius: 4px;
}

.skel--pill {
    border-radius: 999px;
}

@keyframes skel-shimmer {
    100% {
        transform: translateX(100%);
    }
}

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