/* ---------------------------------------------------------------------------
* Page-level layout primitives — shared by both the student and admin
* surfaces so horizontal padding, max-widths, and vertical rhythm don't
* drift between hosts.
*
* Composition pattern:
*
* (see site-header.css)
*
* ...
*
* (see site-footer.css)
*
*
* The `page-shell` flex column + `page-main` flex-1 + `page-main.centered`
* combination puts the main content centered between the header and the
* footer on short pages, while letting it grow naturally on long ones.
* ------------------------------------------------------------------------- */
.page-shell {
@apply flex min-h-screen flex-col bg-slate-50 text-slate-900;
}
.page-main {
@apply w-full flex-1;
/* Vertically center the main content between header and footer. Use on
* short pages (login, single-step apply). */
&.centered {
@apply flex items-center justify-center;
}
}
/* Horizontal padding + max-width wrapper. The base sets the gutters;
* modifiers pick a max-width appropriate to the content. */
.page-container {
@apply container mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8;
}
/* Vertical stack: even spacing between a column of sibling blocks (cards,
* notices) without per-element margins. */
.stack {
@apply space-y-6;
}
/* Accessible skip link: visually hidden until focused, then pinned to the
* top-left so keyboard users can jump straight to the main content. */
.skip-link {
@apply sr-only;
&:focus {
@apply not-sr-only absolute left-2 top-2 z-50 rounded bg-slate-900 px-3 py-1 text-white;
}
}
/* ---------------------------------------------------------------------------
* Content-level heading blocks.
*
* `.view-header` — a page heading row with an optional actions cluster on
* the right (apply dashboard, admin pages). Wrap the heading + subtitle in
* `.titles` so they stack while the actions sit alongside.
*
* `.intro` — a simple editorial intro (login, blocked) with a heading, lead
* paragraphs, an optional bullet list, and an optional actions row.
* ------------------------------------------------------------------------- */
.view-header {
@apply mb-6 flex flex-wrap items-start justify-between gap-4;
& h1 {
@apply text-2xl font-semibold;
}
& .subtitle {
@apply text-sm text-slate-600;
}
& .actions {
@apply flex items-center gap-2;
}
}
.intro {
& h1 {
@apply mb-2 text-2xl font-semibold;
}
& p {
@apply mb-4 text-slate-700;
}
& ul {
@apply mb-6 list-disc space-y-1 pl-6 text-slate-700;
}
& .actions {
@apply flex flex-wrap items-center gap-3;
}
}