.editor-compact-menu .mud-menu-item .mud-menu-item-icon.mud-icon-size-medium {
    font-size: 0.875rem !important;
}

.epos-menu-item-icon-sm .mud-menu-item-icon {
    font-size: 0.875rem !important;
}

.epos-menu-item-danger,
.epos-menu-item-danger .mud-menu-item-icon,
.epos-menu-item-danger .mud-icon-root {
    color: var(--mud-palette-error) !important;
}

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

.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;
    box-sizing: border-box;
    border: 1px solid var(--tp-primary-border) !important;
}

.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-primary:focus-visible,
.mud-button-filled.mud-button-filled-primary:active {
    border-color: var(--tp-primary-border-hover) !important;
}

.mud-button-filled.mud-button-filled-primary:disabled {
    border-color: transparent !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-drawer.app-drawer {
    border-right: 1px solid var(--mud-palette-divider) !important;
}

.mud-dialog {
    border: 1px solid var(--mud-palette-divider) !important;
}

.mud-dialog.create-story-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
}

.mud-dialog.media-lightbox {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 92vw !important;
    padding: 0 !important;
    overflow: visible;
}

.mud-popover:has(.mud-list) {
    border: 1px solid var(--mud-palette-divider) !important;
    overflow: hidden;
}

.mud-popover.select-with-action-popover {
    overflow: hidden;
}

.mud-popover.byline-popover {
    margin-top: 8px;
}

.mud-menu.stb-pick {
    display: flex;
    width: 100%;
    min-width: 0;
}

.mud-popover.stb-fontpick-popover {
    margin-top: 6px;
    border: 1px solid var(--tp-border) !important;
    border-radius: var(--tp-radius);
    background-color: var(--tp-surface-raised);
    box-shadow: var(--tp-shadow-lg);
    overflow: hidden;
}

.mud-popover.tag-select-popover {
    margin-top: 4px;
    border: 1px solid var(--tp-border) !important;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--tp-shadow-lg);
    overflow: hidden;
}

.mud-popover.stb-fontpick-popover .mud-list,
.mud-popover.stb-fontpick-popover .mud-menu-list {
    padding: 0;
}

.mud-popover:has(.validation-problems-menu) {
    max-height: 320px;
    max-width: 440px;
}

.mud-popover .mud-list.validation-problems-menu {
    max-height: 320px;
    overflow-y: auto;
}

.validation-problems-menu .mud-menu-item {
    white-space: nowrap;
}

.validation-problems-menu .validation-problem-row {
    width: 100%;
    min-width: 0;
}

.validation-problems-menu .validation-problem-node {
    flex: 0 0 auto;
}

.validation-problems-menu .validation-problem-message {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:has(.editor-layout-wrapper) {
    overflow: hidden;
}

.mud-dialog.bordered-dialog > .mud-dialog-title {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mud-dialog.bordered-dialog .mud-dialog-actions,
.mud-dialog.bordered-dialog > .mud-dialog-actions {
    border-top: 1px solid var(--mud-palette-divider) !important;
    padding: 12px 24px !important;
}

.mud-dialog.publish-dialog {
    height: min(88vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: none !important;
}

.mud-dialog.publish-dialog .mud-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mud-dialog.publish-dialog .publish-dialog-body {
    flex: 1 1 auto;
    justify-content: flex-start;
    height: 100%;
    min-height: 0;
}

.mud-dialog.publish-dialog .publish-stepper-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    min-height: 0;
}

.mud-dialog.publish-dialog .publish-stepper-wrapper > .mud-stepper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
}

.mud-dialog.publish-dialog .publish-stepper-wrapper .mud-stepper-nav {
    flex: none;
}

.mud-dialog.publish-dialog .publish-stepper-wrapper .mud-stepper-content {
    flex: 1 1 auto;
}

.mud-dialog.publish-dialog .mud-step {
    flex: 0 1 80px !important;
    padding: 8px 2px !important;
}

.mud-dialog.publish-dialog .mud-step-label-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: 0.6875rem !important;
}

.mud-dialog.publish-dialog .mud-step-label-content {
    margin-top: 4px !important;
}

.mud-dialog.publish-dialog .mud-step-label-content-title {
    font-size: 0.6875rem !important;
    line-height: 1.15 !important;
}

.mud-dialog.publish-dialog .mud-stepper-nav-connector {
    flex: 1 1 16px !important;
    margin-top: 18px !important;
}

.mud-dialog.publish-dialog--compact {
    height: auto;
    max-height: min(85vh, 720px);
}

.mud-dialog.publish-dialog--compact .mud-dialog-content {
    overflow-y: auto;
}

.mud-dialog.publish-dialog--compact .publish-dialog-body {
    flex: 0 0 auto;
    min-width: 0;
}

.mud-pagination .mud-button-root:not(.mud-button-filled-primary) {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 70%, var(--mud-palette-background) 30%) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    color: var(--mud-palette-text-primary) !important;
}

.mud-pagination .mud-button-root:not(.mud-button-filled-primary):hover {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 55%, var(--mud-palette-background) 45%) !important;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 50%, var(--mud-palette-divider)) !important;
}

.component-editor-panel .mud-expand-panel-header .mud-icon-root {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.publish-btn.mud-button-root,
.publish-btn .mud-button-root {
    min-height: 0 !important;
    height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 0.75rem !important;
}

.publish-btn.mud-button-root:disabled,
.publish-btn .mud-button-root:disabled {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
    color: rgba(var(--mud-palette-primary-rgb), 0.72) !important;
}

.publish-split .mud-menu .mud-menu-icon-button-activator {
    min-width: 0 !important;
    width: 26px !important;
    height: 30px !important;
    padding: 0 !important;
}

.publish-btn .mud-button-label > .mud-icon-root {
    font-size: 1.0625rem;
}

.publish-split .mud-menu .mud-menu-icon-button-activator .mud-icon-root {
    font-size: 1.125rem !important;
}

.mud-tooltip-root.mud-tooltip-inline {
    display: inline-flex;
    align-items: center;
}

.mud-navmenu .mud-nav-link .mud-nav-link-expand-icon.mud-transform {
    fill: var(--mud-palette-drawer-icon) !important;
}

.mud-navmenu .mud-nav-link {
    transition: background-color var(--tp-dur-fast) var(--tp-ease),
                transform var(--tp-dur-fast) var(--tp-ease) !important;
}

.mud-navmenu .mud-nav-link:active {
    background-color: var(--tp-primary-wash) !important;
    transform: scale(0.99) !important;
}

/* NotificationToast draws its own surface, border, close button and progress bar, so MudBlazor's
   chrome is stripped back to a transparent 380px slot around it — see
   Shared/Components/Feedback/NotificationToast.razor. This must stay keyed on the toast actually
   being present: plain Snackbar.Add calls put bare text in the same container, and stripping the
   chrome from those leaves the message floating unstyled over the page behind it. */
#mud-snackbar-container .mud-snackbar:has(.notification-toast) {
    width: 380px;
    max-width: calc(100vw - 48px);
    min-height: 0;
    padding: 0 !important;
    border: none !important;
    border-radius: 10px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tp-text);
}

#mud-snackbar-container .mud-snackbar:has(.notification-toast) .mud-snackbar-content-message {
    width: 100%;
    padding: 0;
}

/* The editor status bar runs the full width of the bottom edge, so the stack clears its height. */
#mud-snackbar-container.mud-snackbar-location-bottom-left {
    left: 16px;
    bottom: 42px;
}

/* Dialogs that carry a multi-step form or a side rail are unusable in a centred box on a phone.
   Opt them in with epos-dialog-wide and they take the whole screen there, the way DialogOptions
   .FullScreen would - but driven by the viewport, so rotating the device is handled too. */
@media (max-width: 599.98px) {
    .mud-dialog.epos-dialog-wide {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    .mud-dialog.epos-dialog-wide .mud-dialog-content {
        max-height: none;
    }
}

/* A temporary drawer with a fixed Width overhangs a phone viewport. max-width wins over the width
   MudBlazor writes inline, so the drawer caps at the screen instead of pushing the page sideways. */
@media (max-width: 599.98px) {
    .mud-drawer.storydet-drawer {
        max-width: 100%;
    }
}

/* Touch targets. Size.Small renders a 30px icon button, which is below the threshold a finger can
   hit reliably - lift every control to 44px on phones only, so the dense desktop chrome is kept. */
@media (max-width: 599.98px) {
    .mud-button-root.mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    .mud-button-root:not(.mud-icon-button) {
        min-height: 44px;
    }

    .mud-nav-link,
    .mud-list-item {
        min-height: 44px;
    }
}

.mud-dialog {
    transform-origin: center top;
    animation: app-pop-in var(--tp-dur) var(--tp-ease) backwards !important;
}