/* 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.) */

/* The whole app bar is the command-palette pull-down handle. `touch-action: none`
   makes a touch that STARTS on the bar exempt from every native touch gesture, so a
   downward drag can never trigger the browser's pull-to-refresh — and there is no page
   scroll to compete with, because the bar is fixed. Taps still reach the buttons
   underneath (touch-action governs only pan/zoom, never click). The pull-down itself is
   claimed in commandPalette.js, which measures this bar's bounds as its handle zone. */
.mw-appbar-pull-handle {
    touch-action: none;
}

.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);
}