/*
 * App shell primitives: page rails, route stability, header rhythm.
 */

.app-page,
.page-shell,
.app-page-shell,
.app-page-shell-body,
.app-page-shell-header,
.page-content,
main {
    max-width: 100%;
    min-width: 0;
}

.app-page-shell,
.page-shell {
    width: min(100%, var(--app-content-standard));
    margin-inline: auto;
    padding-inline: var(--app-page-x);
}

.app-page-shell.app-page-wide,
.page-shell.page-shell-wide,
.ios-calendar-page,
.schedule-page,
.transport-page {
    width: min(100%, var(--app-content-wide));
}

.app-page-shell.app-page-full,
.page-shell.page-shell-full {
    width: min(100%, var(--app-content-full));
}

.app-page-shell-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--app-space-6);
    margin-bottom: var(--app-space-6);
}

.app-page-shell-copy {
    min-width: 0;
}

.app-page-shell-toolbar {
    flex: 0 1 auto;
    min-width: 0;
}

.app-page-shell-kicker,
.page-kicker {
    color: var(--app-label-color);
    font-size: var(--app-label-size);
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

.app-page-shell-title,
.page-title {
    margin: 0;
    color: var(--app-text);
    font-size: clamp(2rem, 3vw, 2.65rem);
    font-weight: 680;
    letter-spacing: 0;
    line-height: 1.05;
}

.app-page-shell-subtitle,
.page-subtitle {
    max-width: 760px;
    margin-top: 10px;
    color: var(--app-text-muted);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    font-weight: 520;
    line-height: 1.45;
}

.app-section {
    display: grid;
    gap: var(--app-space-5);
    min-width: 0;
}

.app-section + .app-section {
    margin-top: var(--app-space-8);
}

.app-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--app-space-4);
    min-width: 0;
}

.app-section-title {
    margin: 0;
    color: var(--app-text);
    font-size: clamp(1.16rem, 1.45vw, 1.45rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.14;
}

.app-section-description {
    margin-top: 5px;
    color: var(--app-text-muted);
    font-size: 0.96rem;
    line-height: 1.42;
}

/* Page navigation must be native-feeling. Component hovers/popovers can still animate. */
.app-page,
.app-page-shell,
.app-page-shell-header,
.app-page-shell-body,
.page-shell,
.page-content,
.mud-main-content {
    animation-name: none !important;
    transform: none !important;
    transition-property: none !important;
}

.app-drawer .mud-nav-group > .mud-nav-link {
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(214, 219, 234, 0.60) !important;
}

.app-drawer .mud-nav-link.active,
.app-drawer .mud-nav-link.mud-nav-link-active {
    background: linear-gradient(90deg, rgba(120, 136, 200, 0.24), rgba(255, 255, 255, 0.026)) !important;
    box-shadow: inset 2px 0 0 rgba(160, 174, 235, 0.56) !important;
}

.app-drawer .mud-navmenu {
    scrollbar-width: thin;
    scrollbar-color: rgba(145, 160, 224, 0.26) transparent;
}

@media (max-width: 768px) {
    .app-page-shell,
    .page-shell {
        width: min(100% - 32px, 560px);
        padding-inline: 0;
    }

    .app-page-shell-header {
        display: grid;
        align-items: start;
        gap: var(--app-space-4);
        margin-bottom: var(--app-space-5);
    }

    .app-page-shell-title,
    .page-title {
        font-size: clamp(1.75rem, 9vw, 2.2rem);
        line-height: 1.08;
    }

    .app-page-shell-subtitle,
    .page-subtitle {
        font-size: 0.96rem;
    }

    .app-section-header {
        display: grid;
        align-items: start;
        gap: var(--app-space-3);
    }
}