/* Wrapper of the page body (MainLayout); it takes no part in the layout. */
.pn-page {
    display: contents
}

/* A new page body fades in when it is inserted (route change, or the data arrived and replaced the skeleton; an
   Inline skeleton leaves a .pn-loaded marker before the content). Opacity only, on every surface: navigating happens
   many times a day, so nothing slides; the progress line under the top bar (NavProgress) says the page is coming. */
/* Overlays that start hidden (the player sheet and its backdrop) are left out: a fill-mode "both" fade would force
   them visible. */
.pn-page > :not(.pn-skeleton, .pn-sheet, .pn-sheet-backdrop, style, script),
.pn-loaded ~ :not(.pn-sheet, .pn-sheet-backdrop) {
    animation: pn-fade 150ms var(--pn-ease-out) both
}

/* PageSkeleton: invisible for the first 150 ms so quick loads do not flash it. */
@keyframes pn-skeleton-in {
    from { opacity: 0 }
    to { opacity: 1 }
}

.pn-skeleton {
    opacity: 0;
    animation: pn-skeleton-in .3s ease .15s forwards
}

/* Same box as PanelPageHeader (.pn-hero.pn-page-header in profile.css), without its gradient. */
.pn-hero.pn-page-header.pn-skeleton-header {
    background: var(--mud-palette-surface)
}

.pn-skeleton-header .pn-skeleton-icon {
    flex-shrink: 0;
    border-radius: var(--pn-radius)
}

.pn-skeleton-header .pn-skeleton-description {
    margin-top: 4px
}

.pn-skeleton-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px
}

.pn-skeleton-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 16px
}

.pn-skeleton .mud-skeleton {
    max-width: 100%
}

.pn-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

@media (prefers-reduced-motion: reduce) {
    .pn-skeleton { animation: pn-skeleton-in .12s ease .15s forwards }
    .pn-skeleton .mud-skeleton-wave::after { animation: none }
}

/* Progress line on the bottom edge of the top bar (NavProgress + customjs/shell.js). It starts when a link to another
   page is clicked (or when a page has been loading data for 150 ms), creeps towards 90 % while the server answers
   and the page loads, then fills and fades. Transform and opacity only. */
.pn-navprogress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
    pointer-events: none
}

.pn-navprogress span {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--pn-brand-on-dark), var(--pn-brand));
    box-shadow: 0 0 6px rgba(var(--pn-brand-rgb), .6);
    transform-origin: left;
    transform: scaleX(0);
    opacity: 0
}

.pn-navprogress[data-state="loading"] span {
    opacity: 1;
    transform: scaleX(.9);
    transition: transform 6s cubic-bezier(.08, .7, .2, 1)
}

.pn-navprogress[data-state="done"] span {
    opacity: 0;
    transform: scaleX(1);
    transition: transform 160ms var(--pn-ease-out), opacity 200ms ease 140ms
}