/* One compact footer, independent of the surrounding page layout. */
body :is(.portal-footer, .about-page-footer, .legal-footer, .site-footer-app-compact) {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: .8rem 0 0;
    padding: .55rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    box-shadow: none;
    color: var(--ink-soft);
    font-size: .75rem;
    line-height: 1.5;
}

body :is(.portal-footer, .about-page-footer, .legal-footer, .site-footer-app-compact) > :is(span, strong) {
    flex: 0 0 auto;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
    white-space: nowrap;
}

body :is(.portal-footer, .about-page-footer, .legal-footer, .site-footer-app-compact) nav {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: auto;
    min-width: 0;
    margin: 0;
    gap: .3rem .85rem;
}

body :is(.portal-footer, .about-page-footer, .legal-footer, .site-footer-app-compact) a {
    display: inline;
    min-height: 0;
    padding: 0;
    color: var(--brand-ink, var(--brand-strong));
    font-size: inherit;
    font-weight: 650;
    line-height: inherit;
    text-decoration: none;
}

body :is(.portal-footer, .about-page-footer, .legal-footer, .site-footer-app-compact) a:is(:hover, :focus-visible) {
    text-decoration: underline;
}

/* Content determines the required height. No estimated header/footer offset
   that pushes a short project overview below the viewport. */
body :is(.portal-shell, .about-shell, .legal-shell) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-block: .75rem 1rem;
}
body :is(.portal-shell, .about-shell, .legal-shell) > main {
    flex: 1 0 auto;
}
body .dashboard-page > .portal-workspace {
    min-height: 0;
}
/* Account and classroom content must not stretch its cards to fill the page.
   The shared footer uses the available space below the content instead. */
body :is(.auth-security-page, .learning-page) > main {
    flex: 0 0 auto;
    min-width: 0;
}
body :is(.auth-security-page, .learning-page) > .portal-footer {
    margin-top: auto;
}
body :is(.auth-security-page, .learning-page) {
    row-gap: .8rem;
}

@media (max-width: 680px) {
    body :is(.portal-footer, .about-page-footer, .legal-footer, .site-footer-app-compact) nav {
        justify-content: flex-start;
    }
}