/* App-bar chrome styles (mw-appbar-* / mw-devmenu-*) for MainLayout's top bar and the dev menu.

   The title is absolutely positioned dead-center on the app bar. Its wrapper (the "sensor")
   spans from the bar's horizontal center to the left edge of the right cluster (clock, dev
   menu, utility icons, user chip) via an anchor() inset — its width IS the free space between
   the centered title's midline and the buttons. Declaring it an inline-size container lets the
   query below hide the title as soon as that gap gets too small: true centering AND
   collision-aware hiding, no viewport breakpoint guessing. (The left cluster is never the
   binding constraint — the right cluster always collides with the center first.) */

.mw-appbar-right-cluster {
    display: flex;
    align-items: center;
    anchor-name: --mw-appbar-right-cluster;
}

.mw-appbar-title-sensor {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: anchor(--mw-appbar-right-cluster left, 50%);
    container-type: inline-size;
    pointer-events: none;
}

.mw-appbar-title-link {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    text-decoration: none;
}

.mw-appbar-title {
    color: white;
    white-space: nowrap;
}

/* NOTE: Hide when the gap from center to the right cluster drops below half the ~128px title
   plus breathing room */
@container (max-width: 88px) {
    .mw-appbar-title-link {
        visibility: hidden;
    }
}

/* NOTE: Fallback for engines without anchor positioning — the anchor() inset above is then
   invalid, which would collapse the sensor to zero width and permanently hide the title, so
   give the sensor its natural (zero-width, unconstrained) shape back and fall back to hiding
   the still-dead-centered title below a conservative viewport width. */
@supports not (anchor-name: --mw-a) {
    .mw-appbar-title-sensor {
        right: auto;
        container-type: normal;
    }

    @media (max-width: 1500px) {
        .mw-appbar-title-link {
            display: none;
        }
    }
}

/* Dev-menu action items that mirror the filled error button they replaced in the app bar
   (filled error background, white text + icon). */

.mw-devmenu-action-error {
    margin: 4px 8px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-error);
}

.mw-devmenu-action-error,
.mw-devmenu-action-error .mud-menu-item-text,
.mw-devmenu-action-error .mud-icon-root {
    color: var(--mud-palette-error-text);
}

.mw-devmenu-action-error:hover,
.mw-devmenu-action-error:focus-visible {
    background: var(--mud-palette-error-darken);
}