/* ==========================================================================
   /study — space page (tab host)
   The header, tab strip and space-page frame live in study.css; this file
   covers only the shell around the tab body: the panel, its loading and
   error states, and the "space not found" fallback.
   ========================================================================== */

.st-space-page {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The identity block has to be allowed to shrink or a long course name pushes
   the header actions off the right edge instead of ellipsing. */
.st-space-head__ident {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.st-space-head__ident .st-space-head__title {
    max-width: 100%;
}

/* The meta line now carries a "Shared" chip next to its text, so it has to lay
   out as a row. Scoped to this page rather than widened in study.css, where
   `.st-space-head__meta` is still a plain paragraph elsewhere. */
.st-space-page .st-space-head__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.st-space-head__chip {
    flex: 0 0 auto;
}

/* The board card in the study-details modal: a fact plus the way to change it
   at source, since the name belongs to the notes app. */
.st-space-board {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.st-space-board__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.st-space-board .st-btn {
    flex: 0 0 auto;
}

/* Tab panel ---------------------------------------------------------------- */

/* The panel carries `.st-space-body` (and `--rail` when the tab asks for the
   two-column grid), so it must not declare `display` here — that would beat
   `.st-space-body--rail`'s grid on load order. */
.st-space-panel {
    min-width: 0;
    min-height: 0;
}

/* Focus moves here on a tab switch, so the ring would only ever be noise. */
.st-space-panel:focus {
    outline: none;
}

.st-space-tabload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 72px 24px;
    color: var(--st-ink-3);
    font-weight: 600;
}

.st-space-taberror {
    max-width: 520px;
    margin: 56px auto;
    text-align: center;
}

.st-space-taberror .st-btn {
    margin: 0 auto;
}

/* Not found ---------------------------------------------------------------- */

.st-space-notfound {
    max-width: 520px;
    margin: 48px auto;
    text-align: center;
}

.st-space-notfound .st-btn-row {
    justify-content: center;
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 900px) {
    .st-space-head__top {
        gap: 14px;
    }
}

@media (max-width: 760px) {
    .st-space-head__actions {
        width: 100%;
    }

    .st-space-head__actions .st-btn:first-child {
        flex: 1 1 auto;
    }

    /* Let the strip scroll edge to edge rather than clipping inside the
       header padding — on a narrow phone all four tabs never fit. */
    .st-space-head .st-tabs {
        margin: 18px calc(var(--st-main-pad-x) * -1) 0;
        padding: 0 var(--st-main-pad-x);
    }

    .st-space-tabload {
        padding: 48px 16px;
    }

    .st-space-board {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 420px) {
    .st-space-head__ident .st-space-head__title {
        font-size: 20px;
    }
}