/* AppShell owns viewport layout. Page content stays in site.css and legacy CSS. */
html:has(body.site-page) {
    --app-background: #040B08;
    background: var(--app-background);
}
body.site-page {
    --app-sidebar-collapsed: 72px;
    --app-sidebar-expanded: 224px;
    --app-content-max: 1200px;
    --app-content-padding: 20px;
    --app-bottom-nav-height: 68px;
    --app-nav-transition: 200ms;
    --app-nav-open-delay: 90ms;
    --app-nav-close-delay: 150ms;
    --app-nav-background: #05150F;
    --app-nav-accent: #74AFA7;
    --app-nav-hover: rgba(116, 175, 167, .05);
    --app-nav-pressed: rgba(116, 175, 167, .10);
    --app-nav-divider: rgba(116, 175, 167, .10);
    --app-brand-size: 42px;
    --app-echo-color: rgba(116, 175, 167, .20);
    background: var(--app-background);
}
.site-page [data-brand-echo="app"] {
    position: relative;
    top: auto;
    z-index: 1;
    width: 100%;
    height: calc(var(--app-brand-size) + 32px);
    background: transparent;
}
.site-page [data-brand-echo="app"] .brand-track { font-size: var(--app-brand-size); }
.site-page [data-brand-echo="app"] .brand-repeat { color: var(--app-echo-color); opacity: 1; }
.site-page [data-brand-echo="app"] .brand-repeat-clip-before {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 85%);
    mask-image: linear-gradient(to right, transparent, #000 85%);
}
.site-page [data-brand-echo="app"] .brand-repeat-clip-after {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 85%);
    mask-image: linear-gradient(to left, transparent, #000 85%);
}
.site-page .app-shell-frame { min-width: 0; }
.site-page .app-shell-frame--authenticated {
    padding-bottom: calc(var(--app-bottom-nav-height) + env(safe-area-inset-bottom));
}
body.site-page .main-container {
    width: 100%;
    max-width: var(--app-content-max);
    margin-inline: auto;
    padding-inline: var(--app-content-padding);
}
body.site-page main.main-container {
    display: block;
    min-height: calc(100svh - 220px);
    padding-block: 20px 40px;
}
body.site-page .site-footer.main-container {
    margin-block: 0;
    padding-block: 20px 24px;
    font-size: 12px;
}
.site-page .main-container > .toast-stack { width: 100%; margin: 0 0 24px; }

/* One set of items; desktop expands over content, mobile stays below it. */
.site-page .app-navigation {
    position: fixed;
    z-index: 50;
    margin: 0;
    border: 0;
    background: var(--app-nav-background);
}
.site-page .desktop-sidebar { display: none; }
.site-page .app-nav-item {
    position: relative;
    min-width: 0;
    min-height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    border: 0;
    border-radius: 4px;
    color: var(--muted);
    background: transparent;
    font: 600 14px/1.4 var(--font-ui);
    text-decoration: none;
    cursor: pointer;
}
.site-page .app-nav-item[aria-current="page"] { color: var(--text); }
/* Only navigation destinations receive a current-page indicator; Add stays an action. */
.site-page a.app-nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    background: var(--app-nav-accent);
    border-radius: 1px;
    pointer-events: none;
}
@media (hover: hover) {
    .site-page .app-nav-item:not([aria-current="page"]):hover { color: var(--text); background: var(--app-nav-hover); }
}
.site-page .app-nav-item:not([aria-current="page"]):active { color: var(--text); background: var(--app-nav-pressed); }
.site-page .app-nav-item:focus-visible { outline: 2px solid var(--app-nav-accent); outline-offset: -2px; }
.site-page .app-nav-icon { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; font-size: 24px; line-height: 1; }
.site-page .app-nav-avatar { width: 24px; height: 24px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #030905; background: #CCDECB; font-size: 12px; }
.site-page .app-nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.site-page .app-nav-item[aria-current="page"] .app-nav-avatar { outline: 2px solid var(--app-nav-accent); outline-offset: 2px; }
.site-page .mobile-bottom-nav {
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(var(--app-bottom-nav-columns, 5), minmax(max-content, 1fr));
    grid-auto-rows: minmax(48px, auto);
    row-gap: 4px;
    height: auto;
    /* Keep the minimum independent from the measured content reserve. */
    min-height: calc(68px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--app-nav-divider);
    padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.site-page .mobile-bottom-nav .app-nav-item { flex-direction: column; justify-content: center; gap: 5px; }
.site-page .mobile-bottom-nav .app-nav-label {
    font-size: .6875rem;
    line-height: 1.27272727;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
.site-page .mobile-bottom-nav a.app-nav-item[aria-current="page"]::before { top: 0; left: calc(50% - 12px); width: 24px; height: 2px; }
.site-page .mobile-bottom-nav [data-nav="add"] .app-nav-icon { color: rgba(204, 222, 203, .88); }
@media (max-width: 359px) {
    /* Retain all five full 11px labels in one row at the narrowest viewport. */
    .site-page .mobile-bottom-nav { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
}

/* Keep the contextual profile header and legacy title hero within the new grid. */
.site-page .app-topbar { background: var(--app-background); view-transition-name: hoahoa-profile-context; }
.site-page .title-page { margin-inline: 0; }
.site-page :is(.title-summary, .title-production, .detail-columns, .title-page > .content-section) { padding-inline: 0; }
.site-page :is(.profile-tabs, .network-tabs, .segmented-tabs) { background: var(--app-background); }
/* Legacy people cards have an intrinsic action width; let them fit the grid. */
.site-page .people-grid > * { min-width: 0; }
.site-page .person-card { flex-wrap: wrap; }

@media (min-width: 768px) {
    body.site-page { --app-content-padding: 32px; --app-brand-size: 56px; }
    /* Center in the workspace reserved beside the collapsed rail, even on hover. */
    .site-page:has(.desktop-sidebar) [data-brand-echo="app"] {
        width: calc(100% - var(--app-sidebar-collapsed));
        margin-inline-start: var(--app-sidebar-collapsed);
    }
    .site-page .app-shell-frame--authenticated { margin-inline-start: var(--app-sidebar-collapsed); padding-bottom: 0; }
    body.site-page main.main-container { padding-block: 32px 56px; }
    .site-page .mobile-bottom-nav { display: none; }
    .site-page .desktop-sidebar {
        inset: 0 auto 0 0;
        width: var(--app-sidebar-collapsed);
        padding: 16px 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        overflow: hidden;
        transition: width var(--app-nav-transition) ease var(--app-nav-close-delay);
    }
    .site-page .desktop-sidebar:is(:hover, :focus-within) { width: var(--app-sidebar-expanded); transition-delay: var(--app-nav-open-delay); }
    .site-page .desktop-sidebar .app-nav-item { flex: 0 0 48px; padding-inline: 12px; gap: 16px; }
    .site-page .desktop-sidebar a.app-nav-item[aria-current="page"]::before { left: 0; top: 13px; width: 2px; height: 22px; }
    .site-page .desktop-sidebar .app-nav-label { opacity: 0; white-space: nowrap; transition: opacity var(--app-nav-transition) ease var(--app-nav-close-delay); }
    .site-page .desktop-sidebar:is(:hover, :focus-within) .app-nav-label { opacity: 1; transition-delay: var(--app-nav-open-delay); }
    .site-page .desktop-sidebar:focus-within,
    .site-page .desktop-sidebar:focus-within .app-nav-label { transition-delay: 0ms; }
    /* Neutralize the old title's mobile negative top margin at this breakpoint. */
    .site-page .title-page { margin-top: -32px; }
}
@media (min-width: 1360px) {
    body.site-page { --app-content-padding: 48px; --app-brand-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-page .desktop-sidebar, .site-page .desktop-sidebar .app-nav-label { transition: none; }
}