/* ── Design tokens: Jacaranda ────────────────────────────────────────────────
   Taken from Harare in October and November: a flat block of jacaranda violet
   with fallen petals on it, over clean white working space. The violet is used
   as a solid colour, never a gradient, and only in a few places (the band at
   the top of a page, the sign-in field, the primary button) so it stays loud
   where it is used and quiet everywhere else.

   Light values live on :root; the dark block only re-points the same names, so
   every rule below is written once and works in both schemes. */
:root {
    /* Type ------------------------------------------------------------- */
    --us-font: 'Figtree', 'Segoe UI', system-ui, sans-serif;
    /* Headings, figures and the brand. Set tight; used with restraint. */
    --us-font-display: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;

    /* Spacing scale — every gap/padding/margin should come from here rather
       than an arbitrary rem value, so the whole app shares one rhythm. */
    --us-space-1: .25rem;
    --us-space-2: .5rem;
    --us-space-3: .75rem;
    --us-space-4: 1rem;
    --us-space-5: 1.5rem;
    --us-space-6: 2rem;
    --us-space-8: 3rem;

    /* Radius scale. Buttons and nav links are pills; panels are soft. */
    --us-radius-sm: 10px;
    --us-radius: 14px;
    --us-radius-lg: 18px;
    --us-radius-pill: 999px;

    /* Colour ------------------------------------------------------------ */
    --us-bg: #f4f2f8;            /* morning: the page ground, a violet-biased grey */
    --us-surface: #ffffff;
    --us-surface-2: #f8f6fc;
    --us-border: #e2dcee;
    --us-text: #1f1a2b;          /* bark */
    --us-text-muted: #645c76;
    --us-accent: #6b4cc2;        /* jacaranda */
    --us-accent-hover: #5a3daf;
    --us-accent-ink: #ffffff;    /* text on a jacaranda fill */
    --us-accent-soft: #efeafb;

    /* Meaning, kept apart from the brand colour. */
    --us-danger: #b3313a;
    --us-danger-soft: #f8dfe1;
    --us-success: #2f7a55;       /* leaf */
    --us-success-soft: #dff1e7;
    --us-warning: #8f5a00;
    --us-warning-soft: #fbebcc;

    /* The band: a solid block of bloom at the top of a page. */
    --us-band: #6b4cc2;
    --us-band-ink: #ffffff;
    --us-band-muted: #e2d9fb;
    --us-band-card: rgba(255, 255, 255, .12);
    --us-band-track: rgba(255, 255, 255, .22);
    --us-petal: #c4b3f2;

    --us-shadow: 0 1px 2px rgba(31, 26, 43, .04), 0 8px 24px rgba(31, 26, 43, .05);
    --us-shadow-sm: 0 1px 2px rgba(31, 26, 43, .05);
    --us-shadow-md: 0 6px 16px rgba(31, 26, 43, .07);
    --us-shadow-lg: 0 16px 40px rgba(31, 26, 43, .14);

    --us-text-primary: var(--us-text);
    --us-ring-track: var(--us-border);
    --us-skeleton-color: var(--us-border);

    /* Sidebar: light, like the working area, so the band is the one strong
       colour on screen. The current page is a solid bark pill. */
    --us-side-bg: #fbfafd;
    --us-side-from: var(--us-side-bg);
    --us-side-to: var(--us-side-bg);
    --us-side-text: #1f1a2b;
    --us-side-text-strong: #1f1a2b;
    --us-side-muted: #574e6c;
    --us-side-hover: #f0ecf8;
    --us-side-active: #1f1a2b;
    --us-side-active-ink: #ffffff;
    --us-side-border: #e2dcee;
    --us-side-accent: #6b4cc2;

    /* Transitions — one timing function everywhere so hover/focus feel
       the same on a button as on a nav link. */
    --us-ease: 160ms cubic-bezier(.4, 0, .2, 1);

    /* Light is the look, whatever the device is set to. Without this a
       device in dark mode would still draw date pickers and scrollbars dark. */
    color-scheme: light;
}

/* Dark is opt-in: it applies only when data-theme="dark" is set on <html>,
   never because the device happens to be in dark mode. White jacaranda is
   the school's chosen look; the dark values are kept for anyone who asks. */
:root[data-theme="dark"] {
    /* Native widgets — the date picker's calendar, a select's dropdown list,
       scrollbars — are drawn by the browser and stay light unless told. */
    color-scheme: dark;

    --us-bg: #120f18;
    --us-surface: #1a1622;
    --us-surface-2: #201b2a;
    --us-border: #2d2738;
    --us-text: #ece8f4;
    --us-text-muted: #a39ab6;
    --us-accent: #a88ef0;
    --us-accent-hover: #b9a3f5;
    --us-accent-ink: #160f28;
    --us-accent-soft: #2a2140;

    --us-danger: #ff8d96;
    --us-danger-soft: #3e161b;
    --us-success: #6ccb98;
    --us-success-soft: #15301f;
    --us-warning: #e8b654;
    --us-warning-soft: #35290e;

    /* A dusk version of the bloom: deep enough to sit in a dark room,
       still unmistakably violet. */
    --us-band: #3e2b78;
    --us-band-ink: #f4f0ff;
    --us-band-muted: #c9bcf2;
    --us-band-card: rgba(255, 255, 255, .08);
    --us-band-track: rgba(255, 255, 255, .14);
    --us-petal: #7e64d0;

    --us-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --us-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --us-shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
    --us-shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
    --us-ring-track: #2d2738;
    --us-skeleton-color: #251f30;

    --us-side-bg: #0f0c14;
    --us-side-text: #dcd5ea;
    --us-side-text-strong: #ffffff;
    --us-side-muted: #8a80a0;
    --us-side-hover: #1e1828;
    --us-side-active: #a88ef0;
    --us-side-active-ink: #160f28;
    --us-side-border: #2a2435;
    --us-side-accent: #a88ef0;
}

html, body {
    color: var(--us-text);
    background: var(--us-bg);
}

html, body {
    font-family: var(--us-font);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--us-font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--us-text);
    text-wrap: balance;
}

/* Most pages still use a plain <h1> rather than the .us-page-title class, so
   the page-header look is applied here at the element level instead of
   requiring every page to be rewritten. */
article.content > h1:first-child,
.us-page > h1:first-child {
    font-size: 1.6rem;
    margin: 0 0 .35rem;
}

article.content > p.us-page-intro:first-of-type + *,
article.content { padding-top: var(--us-space-6); }

article.content { padding-bottom: var(--us-space-8); }

a, .btn-link {
    color: var(--us-accent);
}

.btn-primary {
    color: var(--us-accent-ink);
    background-color: var(--us-accent);
    border-color: var(--us-accent);
    border-radius: var(--us-radius-pill);
}

.btn-primary:hover, .btn-primary:focus {
    color: var(--us-accent-ink);
    background-color: var(--us-accent-hover);
    border-color: var(--us-accent-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--us-surface), 0 0 0 0.25rem var(--us-accent);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ── Sign-in ─────────────────────────────────────────────────────────────── */
.blank-layout {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--us-bg);
    padding: var(--us-space-5);
}

/* The sign-in page is a field of jacaranda with petals on it, and the form
   on a plain white card. BlankLayout is shared with ClaimAccount and
   ClaimStaffAccount too, so this is scoped to .login-bg rather than changing
   every chromeless page. */
.login-bg {
    position: fixed;
    inset: 0;
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: var(--us-space-5);
    background: var(--us-band);
    overflow: auto;
}

/* A school's own photo, tinted so it reads as part of the same field. */
.login-bg-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--us-band);
    opacity: .82;
}

.login-shell { position: relative; z-index: 1; width: 100%; max-width: 25rem; }

.login-card {
    background: var(--us-surface);
    border-radius: 22px;
    padding: var(--us-space-6);
    box-shadow: var(--us-shadow-lg);
    text-align: center;
}

.login-brand-mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--us-space-4);
    border-radius: 50%;
    color: var(--us-accent-ink);
    background: var(--us-accent);
}
.login-brand-mark svg { width: 1.5rem; height: 1.5rem; }

.login-title {
    margin: 0;
    font-family: var(--us-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--us-text);
}
.login-subtitle { margin: .35rem 0 var(--us-space-6); color: var(--us-text-muted); font-size: .92rem; }

.login-card form { text-align: left; }
.login-label { margin-top: var(--us-space-3); }
</parameter>

.login-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--us-text);
    margin-bottom: .35rem;
}

.login-input {
    width: 100%;
    padding: .6rem .75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-sm);
    background: var(--us-surface);
    color: var(--us-text);
    font-size: .95rem;
}

.login-input:focus {
    outline: 2px solid var(--us-accent);
    outline-offset: 1px;
    border-color: var(--us-accent);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    font-size: .88rem;
    color: var(--us-text-muted);
}

.login-button {
    width: 100%;
    padding: .75rem 1rem;
    border: 0;
    border-radius: var(--us-radius-pill);
    background: var(--us-accent);
    color: var(--us-accent-ink);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    margin-top: var(--us-space-2);
    transition: background-color var(--us-ease);
}

.login-button:hover { background: var(--us-accent-hover); }
.login-button:focus-visible { outline: 2px solid var(--us-accent); outline-offset: 2px; }

.login-password-field { position: relative; }
.login-password-field .login-input { padding-right: 2.6rem; }

.login-eye {
    position: absolute;
    right: .5rem;
    top: 0;
    bottom: 0;
    background: none;
    border: 0;
    padding: 0 .5rem;
    cursor: pointer;
    color: var(--us-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.login-eye svg { width: 1.1rem; height: 1.1rem; }
.login-eye.is-visible { color: var(--us-accent); }

.login-error {
    background: var(--us-danger-soft);
    border: 0;
    color: var(--us-danger);
    padding: .65rem .8rem;
    border-radius: var(--us-radius-sm);
    font-size: .88rem;
    margin-bottom: 1.25rem;
}

.us-user {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--us-text);
    font-size: .88rem;
    font-weight: 500;
    margin-right: var(--us-space-2);
}
.us-logout-form { display: inline; }

.us-logout {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--us-border);
    background: var(--us-surface);
    border-radius: var(--us-radius-sm);
    padding: .45rem .9rem .45rem .75rem;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--us-text);
    transition: background-color var(--us-ease), border-color var(--us-ease), color var(--us-ease);
}

.us-logout svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

@media (max-width: 480px) {
    .us-logout span { display: none; }
    .us-logout { padding: .45rem; }
    .us-logout svg { width: 1.1rem; height: 1.1rem; margin: 0; }
}

.us-logout:hover {
    background: #fef3f2;
    border-color: #fda29b;
    color: var(--us-danger);
}

.access-denied, .access-checking { padding: 2.5rem 1rem; max-width: 34rem; }
.access-denied h1 { font-size: 1.35rem; color: #b42318; }
.access-denied p { color: var(--us-text-muted); }

/* ── School structure admin ──────────────────────────────────────────────── */
/* Page header pattern — used across most pages but was never actually
   defined, so titles and subtitles were rendering in the browser's plain
   default styling. */
.us-page { padding-bottom: var(--us-space-8); }

.us-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--us-space-4);
    margin-bottom: var(--us-space-6);
}

.us-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 .3rem;
    color: var(--us-text);
}

.us-page-subtitle {
    margin: 0;
    color: var(--us-text-muted);
    font-size: .92rem;
    max-width: 42rem;
}

.us-page-intro { color: var(--us-text-muted); max-width: 46rem; margin-bottom: 1.5rem; }

.us-alert {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1rem;
    border-radius: var(--us-radius-sm);
    margin-bottom: var(--us-space-5);
    font-size: .88rem;
    font-weight: 500;
    border-left: 3px solid transparent;
}
.us-alert-ok { background: #ecfdf3; border-left-color: #12b76a; color: #027a48; }
.us-alert-error { background: #fef3f2; border-left-color: var(--us-danger); color: #b42318; }

[data-theme="dark"] .us-alert-error { background: #2b1614; border-color: #7a2f28; color: #ffb4ac; }

.us-empty { background: var(--us-surface); border: 1px solid var(--us-border); border-radius: 12px; padding: 2rem; }
.us-empty h2 { font-size: 1.15rem; margin-top: 0; }

.us-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .85rem;
    margin: 1.25rem 0;
}

.us-template-card {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    text-align: left;
    padding: .9rem 1rem;
    border: 1px solid var(--us-border);
    border-radius: 10px;
    background: var(--us-surface);
    cursor: pointer;
}

.us-template-card:hover { border-color: var(--us-accent); background: var(--us-accent-soft); }
.us-template-card span { font-size: .82rem; color: var(--us-text-muted); }

.us-stage-card {
    position: relative;
    background: var(--us-surface);
    border: 1px solid var(--us-border);
    box-shadow: var(--us-shadow-sm);
    border-radius: var(--us-radius-lg);
    padding: var(--us-space-6);
    margin-bottom: var(--us-space-5);
    transition: box-shadow var(--us-ease), border-color var(--us-ease),
                transform var(--us-ease);
}

.us-stage-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.us-stage-card:hover {
    box-shadow: var(--us-shadow-lg);
    border-color: var(--us-border);
    transform: translateY(-2px);
}

.us-stage-card h2 { font-size: 1.15rem; }

.us-stage-header { display: flex; justify-content: space-between; align-items: flex-start; }
.us-stage-header h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
.us-stage-header small { color: var(--us-text-muted); }

.us-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .74rem;
    background: var(--us-surface-2);
    border-radius: 5px;
    padding: .1rem .4rem;
    color: var(--us-text-muted);
}

.us-count { color: var(--us-text-muted); font-size: .85rem; }
.us-muted { color: var(--us-text-muted); font-size: .88rem; }

.us-table { width: 100%; border-collapse: collapse; margin: .9rem 0; font-size: .9rem; }

@media (max-width: 640.98px) {
    .us-table-wrap {
        overflow-x: auto;
        margin: .9rem 0;
        -webkit-overflow-scrolling: touch;
    }

    .us-table-wrap .us-table {
        margin: 0;
        min-width: 32rem;
    }
}
.us-table th {
    text-align: left;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--us-text-muted);
    border-bottom: 1px solid var(--us-border);
    padding: .45rem .5rem;
}
.us-table td { padding: .5rem; border-bottom: 1px solid var(--us-border); }
.us-row-retired td { opacity: .5; }
.us-row-actions { text-align: right; white-space: nowrap; }

/* Link buttons in a row of actions need separating; without this "Edit" and
   "Set current" run together into one unreadable word. */
.us-row-actions .us-btn-link + .us-btn-link { margin-left: .75rem; }

.us-inline-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.us-inline-form input {
    padding: .45rem .6rem;
    border: 1px solid var(--us-border);
    border-radius: 7px;
    font-size: .88rem;
}
.us-stage-form { margin-top: 1rem; }

.us-btn-primary, .us-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: var(--us-radius-sm);
    padding: .55rem 1.1rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--us-ease), border-color var(--us-ease),
                transform var(--us-ease), box-shadow var(--us-ease);
}

.us-btn-primary:active, .us-btn-secondary:active { transform: translateY(1px); }

.us-btn-primary {
    background: var(--us-accent);
    border-radius: var(--us-radius-pill);
    color: var(--us-accent-ink);
    border: 0;
    box-shadow: none;
}

.us-btn-primary:hover {
    background: var(--us-accent-hover);
    transform: translateY(-1px);
}

.us-btn-secondary {
    background: var(--us-surface);
    color: var(--us-text);
    border: 1px solid var(--us-border);
}

.us-btn-secondary:hover { background: var(--us-surface-2); border-color: #d3d7e3; }

/* A button that is working: a small spinner in front of its label. Pages set
   aria-busy on the button while their command runs, next to disabled. */
.us-btn-primary:disabled, .us-btn-secondary:disabled {
    opacity: .65; cursor: not-allowed; transform: none; box-shadow: none;
}
button[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"]::before {
    content: "";
    width: .85em; height: .85em;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%;
    animation: us-spin .7s linear infinite;
}
@keyframes us-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    button[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: .5; }
}

.us-btn-primary:focus-visible, .us-btn-secondary:focus-visible,
.us-btn-link:focus-visible {
    outline: 2px solid var(--us-accent);
    outline-offset: 2px;
}

.us-btn-link {
    background: none; border: 0; color: var(--us-accent); cursor: pointer;
    font-size: .88rem; padding: .2rem 0; font-weight: 600;
    transition: color var(--us-ease);
}
.us-btn-link:hover { color: var(--us-accent-hover); text-decoration: underline; }

/* Destructive actions read as destructive before they are clicked, not after. */
.us-btn-link.us-danger { color: var(--us-danger); }

.us-inline-form select {
    padding: .45rem .6rem;
    border: 1px solid var(--us-border);
    border-radius: 7px;
    font-size: .88rem;
    background: var(--us-surface);
}

/* ── ERP settings ────────────────────────────────────────────────────────── */
.us-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .85rem;
    margin: 1rem 0;
}

.us-form-grid label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--us-text);
}

.us-form-grid input, .us-form-grid select {
    padding: .45rem .6rem;
    border: 1px solid var(--us-border);
    border-radius: 7px;
    font-size: .88rem;
    font-weight: 400;
}

.us-form-grid .us-form-wide { grid-column: 1 / -1; }
.us-form-grid small { font-weight: 400; }

.us-ok { color: #027a48; }
.us-fail { color: #b42318; }

.us-key-reveal {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    background: var(--us-surface);
    border: 1px dashed #6ce9a6;
    border-radius: 7px;
    padding: .55rem .7rem;
    margin-top: .5rem;
    word-break: break-all;
}

.us-btn-move {
    border: 1px solid var(--us-border);
    background: var(--us-surface);
    border-radius: 6px;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1;
    font-size: .7rem;
    color: var(--us-text-muted);
    cursor: pointer;
    margin-right: .15rem;
}

.us-btn-move:hover:not(:disabled) { background: var(--us-surface-2); border-color: var(--us-accent); color: var(--us-accent); }
.us-btn-move:disabled { opacity: .3; cursor: default; }


/* ── Sidebar ────────────────────────────────────────────────────────────────
   These classes are used by NavMenu.razor but had no styles at all, so links
   rendered in the browser's default blue on the dark gradient — unreadable.
   Everything here inherits from the sidebar tokens above. */
.us-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    padding: 1rem .75rem 0;
    color: var(--us-side-text);
    background: var(--us-side-bg);
    border-right: 1px solid var(--us-side-border);
}

.us-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--us-space-3);
    padding: var(--us-space-4) var(--us-space-2) var(--us-space-5);
    margin-bottom: var(--us-space-2);
    border-bottom: 1px solid var(--us-side-border);
}

.us-brand-mark {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--us-accent-ink);
    background: var(--us-accent);
}

.us-brand-mark svg { width: 1.25rem; height: 1.25rem; }

.us-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.us-brand-text strong {
    color: var(--us-side-text-strong);
    font-family: var(--us-font-display);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
.us-brand-text small { color: var(--us-side-muted); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }

.us-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;

    /* A thin scrollbar in the sidebar's own border colour, instead of the
       browser's heavier default. */
    scrollbar-width: thin;
    scrollbar-color: var(--us-side-border) transparent;
}

.us-nav-list::-webkit-scrollbar { width: 6px; }
.us-nav-list::-webkit-scrollbar-track { background: transparent; }
.us-nav-list::-webkit-scrollbar-thumb {
    background: var(--us-side-border);
    border-radius: 999px;
}
.us-nav-list::-webkit-scrollbar-thumb:hover { background: var(--us-side-muted); }

.us-nav-section {
    padding: 1.05rem .75rem .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--us-side-muted);
}

/* The colour is set explicitly rather than inherited, because NavLink renders a
   plain <a> that would otherwise pick up the browser's default link colour. */
.us-nav-link,
.us-sidebar a.us-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .9rem;
    margin-bottom: .15rem;
    border-radius: var(--us-radius-pill);
    color: var(--us-side-text);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 600;
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}

.us-nav-link:hover,
.us-sidebar a.us-nav-link:hover {
    background: var(--us-side-hover);
    color: var(--us-side-text-strong);
}

.us-nav-link:focus-visible {
    outline: 2px solid var(--us-side-accent);
    outline-offset: 1px;
}

/* The current page is a solid pill: shape and weight mark it, not colour
   alone, so it reads the same to someone who cannot tell violet from grey. */
.us-nav-link.active,
.us-sidebar a.us-nav-link.active,
.us-nav-link.active:hover,
.us-sidebar a.us-nav-link.active:hover {
    background: var(--us-side-active);
    color: var(--us-side-active-ink);
    font-weight: 600;
}

.us-nav-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    opacity: 1;
}

.us-nav-link.active .us-nav-icon { opacity: 1; color: inherit; }

.us-sidebar-footer {
    padding: .9rem .75rem 1.1rem;
    border-top: 1px solid var(--us-side-border);
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.us-sidebar-footer small { color: var(--us-side-muted); font-size: .72rem; }

.us-role-chip {
    align-self: flex-start;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--us-accent);
    background: var(--us-accent-soft);
    border: 0;
}

/* ── Shell surfaces follow the theme ────────────────────────────────────── */
.us-user { color: var(--us-text); }

.us-logout {
    background: var(--us-surface);
    color: var(--us-text);
    border-color: var(--us-border);
}

.us-logout:hover { background: var(--us-surface-2); }

/* ── Timetable & rota grids ──────────────────────────────────────────────── */
.us-timetable-scroll {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
    border: 1px solid var(--us-border);
    border-radius: 12px;
    background: var(--us-surface);
}

.us-timetable {
    border-collapse: collapse;
    width: 100%;
    min-width: 52rem;
    font-size: .86rem;
}

.us-timetable th,
.us-timetable td {
    border: 1px solid var(--us-border);
    padding: .45rem .5rem;
    vertical-align: top;
    text-align: left;
}

.us-timetable thead th {
    background: var(--us-surface-2);
    position: sticky;
    top: 0;
    white-space: nowrap;
}

.us-tt-corner { width: 8.5rem; }

.us-tt-day {
    background: var(--us-surface-2);
    white-space: nowrap;
    font-weight: 600;
}

.us-tt-period { display: block; font-weight: 600; }
.us-tt-time   { display: block; font-size: .72rem; color: var(--us-text-muted); font-weight: 400; }

/* Breaks are dimmed so the teaching day reads as the foreground. */
.us-tt-break { background: var(--us-surface-2); }
.us-tt-breaklabel { color: var(--us-text-muted); }

.us-tt-lesson {
    position: relative;
    background: var(--us-accent-soft);
    border-left: 3px solid var(--us-accent);
    border-radius: 6px;
    padding: .35rem .45rem;
    margin-bottom: .3rem;
}

.us-tt-lesson strong { display: block; font-size: .84rem; }
.us-tt-lesson span   { display: block; font-size: .74rem; color: var(--us-text-muted); }
.us-tt-room          { font-style: italic; }

.us-tt-remove {
    position: absolute;
    top: .1rem;
    right: .2rem;
    font-size: .95rem;
    line-height: 1;
    padding: 0;
}

.us-tt-today { outline: 2px solid var(--us-accent); outline-offset: -2px; }

/* An understaffed duty is called out rather than left as an empty cell. */
.us-tt-short { background: rgba(240, 68, 56, .07); }

.us-tt-shortlabel {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: #b42318;
}

.us-day-toggles { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 1rem; }

.us-day-toggle {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border: 1px solid var(--us-border);
    border-radius: 999px;
    font-size: .85rem;
    cursor: pointer;
}

.us-check { display: inline-flex; align-items: center; gap: .35rem; }
.us-subhead { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.us-row-break td { opacity: .65; font-style: italic; }

/* ── Subject chips ───────────────────────────────────────────────────────── */
.us-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }

.us-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .55rem;
    border: 1px solid var(--us-border);
    border-radius: 999px;
    background: var(--us-surface-2);
    font-size: .82rem;
    white-space: nowrap;
}

.us-chip small { color: var(--us-text-muted); font-size: .7rem; }

/* Required subjects are visually distinct from options at a glance. */
.us-chip-core {
    background: var(--us-accent-soft);
    border-color: var(--us-accent);
}

.us-chip-remove {
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--us-text-muted);
    font-size: .95rem;
    line-height: 1;
    padding: 0 0 0 .1rem;
}

.us-chip-remove:hover { color: #b42318; }

.us-subrow td { background: var(--us-surface-2); }

/* ── Register marking ────────────────────────────────────────────────────── */
.us-mark-row { display: flex; flex-wrap: wrap; gap: .3rem; }

.us-mark {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border: 1px solid var(--us-border);
    border-radius: 999px;
    font-size: .8rem;
    cursor: pointer;
    background: var(--us-surface);
    user-select: none;
}

.us-mark input { position: absolute; opacity: 0; width: 0; height: 0; }

/* The selected mark is colour-coded so a register can be scanned at a glance. */
.us-mark-on { color: #fff; font-weight: 600; border-color: transparent; }
.us-mark-present { background: #12b76a; }
.us-mark-late    { background: #f79009; }
.us-mark-absent  { background: #f04438; }
.us-mark-excused { background: #6172f3; }

.us-warn { color: #b54708; font-weight: 600; }
.us-bad  { color: #b42318; font-weight: 600; }

/* ── Access rights matrix ────────────────────────────────────────────────── */
.us-access-table td span.us-muted { display: block; font-size: .78rem; }
.us-access-role { text-align: center; white-space: nowrap; }
.us-access-cell { text-align: center; }

/* ── Destructive actions ─────────────────────────────────────────────────── */
.us-btn-danger {
    background: #b42318;
    color: #fff;
    border: 0;
    border-radius: 7px;
    padding: .35rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.us-btn-danger:hover { background: #912018; }
.us-btn-danger:disabled { opacity: .55; cursor: not-allowed; }
.us-btn-danger:disabled:hover { background: #b42318; }

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

/* Document numbering preview — the format takes effect before it is saved, so
   the rendered example is the control that actually explains the settings. */
.us-preview-line {
    background: var(--us-surface-2);
    border: 1px solid var(--us-border);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin: 0 0 1rem;
    font-size: .9rem;
}
.us-preview-line .us-code { font-size: 1rem; }

/* Checkboxes sit badly in the labelled column grid, where each cell reserves
   room for a caption above its control. Given their own row they line up. */
.us-check-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .25rem 0 1rem; }

/* ── Form controls ──────────────────────────────────────────────────────────
   A control with no colour of its own renders the browser default — black text
   on whatever background it was given, which on this theme's dark surfaces is
   unreadable. Set once here so every form in the app inherits it rather than
   each page remembering. */
input, select, textarea {
    color: var(--us-text);
    background-color: var(--us-surface);
    font-family: inherit;
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-sm);
    padding: .55rem .75rem;
    font-size: .9rem;
    transition: border-color var(--us-ease), box-shadow var(--us-ease);
}

input:hover, select:hover, textarea:hover { border-color: #ccd1de; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--us-accent);
    box-shadow: 0 0 0 3px var(--us-accent-soft);
}

input::placeholder, textarea::placeholder { color: var(--us-text-muted); }

input:disabled, select:disabled, textarea:disabled {
    background-color: var(--us-surface-2);
    color: var(--us-text-muted);
}

/* Fee setup and fee list ---------------------------------------------------- */

/* Retired rows stay readable — they are history, not noise — but must not read
   as live configuration. */
.us-row-muted td { opacity: .55; }

.us-subhead {
    font-size: .95rem;
    margin: 1.4rem 0 .4rem;
    color: var(--us-text);
}

.us-small { font-size: .78rem; }

/* Money reads far faster right-aligned in a fixed-width figure, since the digits
   line up by place value down the column. */
.us-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Invoice status chips --------------------------------------------------------
   The question a finance clerk is asking of a list of invoices is "is money
   owed?", so the colour answers that before the label is read. */
.us-chip-ok { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.us-chip-bad { background: #fef3f2; border-color: #fda29b; color: #b42318; }
.us-chip-muted { background: var(--us-surface-2); border-color: var(--us-border); color: var(--us-text-muted); }

[data-theme="dark"] .us-chip-ok { background: #10291d; border-color: #1f5b3a; color: #75e0a7; }
[data-theme="dark"] .us-chip-bad { background: #2b1614; border-color: #7a2f28; color: #ffb4ac; }

/* Headline figures on a document — total, paid, outstanding, due. */
.us-figure-row { display: flex; flex-wrap: wrap; gap: 2rem; }
.us-figure { display: flex; flex-direction: column; gap: .2rem; }
.us-figure-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--us-text-muted);
}
.us-figure-value { font-size: 1.35rem; font-variant-numeric: tabular-nums; }

.us-table tfoot td {
    border-top: 2px solid var(--us-border);
    font-variant-numeric: tabular-nums;
}

/* Email --------------------------------------------------------------------- */

/* A diverted-mail warning must be impossible to miss: someone reading this page
   on the live system needs to know instantly that families are getting nothing. */
.us-alert-warn {
    background: #fffaeb;
    border: 1px solid #fedf89;
    color: #93370d;
    padding: .75rem 1rem;
    border-radius: var(--us-radius);
    margin-bottom: 1rem;
}

[data-theme="dark"] .us-alert-warn { background: #2b2011; border-color: #7a5a1f; color: #fedf89; }

.us-template { padding: .8rem 0; border-top: 1px solid var(--us-border); }
.us-template:first-of-type { border-top: none; }

/* Templates are plain text and their line breaks are the message, so they are
   shown as written rather than reflowed. */
.us-template-body {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: .85rem;
    color: var(--us-text-muted);
    background: var(--us-surface-2);
    padding: .7rem .9rem;
    border-radius: var(--us-radius);
    margin: .4rem 0;
}

.us-form-grid textarea {
    width: 100%;
    font-family: inherit;
    font-size: .9rem;
    padding: .5rem .6rem;
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius);
    background: var(--us-surface);
    color: var(--us-text);
}

/* Parent portal invoices ------------------------------------------------------
   A family reads one bill at a time, so each is a card rather than a table row —
   the amount owed and whether it is late are the two things that must land
   before anything else. */
.us-invoice {
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius);
    padding: .9rem 1rem;
    margin-bottom: .8rem;
    background: var(--us-surface);
}

.us-invoice-overdue { border-color: #fda29b; }

[data-theme="dark"] .us-invoice-overdue { border-color: #7a2f28; }

.us-invoice-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.us-invoice-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.us-invoice-amount strong { font-size: 1.2rem; }

.us-invoice-status {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}

/* Public school page -----------------------------------------------------------
   This is the one page in the product a visitor sees before they are anyone, so
   it does not use the signed-in chrome at all. */

.us-landing {
    position: relative;
    color: var(--us-text);
    overflow-x: hidden;
    background:
        var(--us-bg);
}

/* Slow-drifting soft shapes behind the narrow centred content, so the wide
   margins either side read as designed space rather than empty page. */
.us-landing-orbs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.us-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    animation: us-orb-float 22s ease-in-out infinite;
}

.us-orb-1 {
    width: 22rem; height: 22rem;
    left: -6rem; top: 8rem;
    background: radial-gradient(circle, rgba(106, 124, 250, .35), transparent 70%);
}
.us-orb-2 {
    width: 26rem; height: 26rem;
    right: -8rem; top: 40rem;
    background: radial-gradient(circle, rgba(163, 91, 250, .3), transparent 70%);
    animation-delay: -8s;
}
.us-orb-3 {
    width: 18rem; height: 18rem;
    left: 8%; bottom: 10rem;
    background: radial-gradient(circle, rgba(106, 124, 250, .28), transparent 70%);
    animation-delay: -14s;
}

@keyframes us-orb-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2.5rem, -2rem); }
}

.us-landing-bar, .us-hero, .us-flags, .us-landing-section, .us-landing-foot {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .us-orb { animation: none; }
}

.us-landing-plain {
    max-width: 34rem;
    margin: 6rem auto;
    padding: 0 1.5rem;
    text-align: center;
}

.us-landing-logo { max-height: 5rem; margin-bottom: 1rem; }

.us-landing-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--us-space-4);
    padding: var(--us-space-3) var(--us-space-6);
    background: color-mix(in srgb, var(--us-surface) 85%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--us-border);
}

.us-landing-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; }
.us-landing-brand img { max-height: 2.2rem; }

.us-landing-bar nav { display: flex; align-items: center; gap: var(--us-space-5); }
.us-landing-bar nav a { color: var(--us-text-muted); text-decoration: none; font-weight: 500; transition: color var(--us-ease); }
.us-landing-bar nav a:hover { color: var(--us-text); }
.us-landing-bar nav a.us-btn-primary { color: var(--us-accent-ink); }

.us-landing-toggle-input { display: none; }
.us-landing-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--us-text);
}
.us-landing-toggle svg { width: 1.4rem; height: 1.4rem; }

@media (max-width: 720px) {
    .us-landing-toggle { display: flex; }

    .us-landing-bar nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--us-surface);
        border-bottom: 1px solid var(--us-border);
        box-shadow: var(--us-shadow-md);
        padding: var(--us-space-3);
    }

    .us-landing-bar nav a {
        padding: .7rem var(--us-space-3);
        border-radius: var(--us-radius-sm);
    }
    .us-landing-bar nav a:hover { background: var(--us-surface-2); }
    .us-landing-bar nav a.us-btn-primary { margin-top: .4rem; text-align: center; }

    .us-landing-toggle-input:checked ~ nav { display: flex; }
}

/* Hero ------------------------------------------------------------------------
   Slides are stacked and cross-faded rather than moved, so nothing reflows as
   the pictures change and the words never jump. */
.us-hero {
    position: relative;
    height: min(38rem, 88vh);
    overflow: hidden;
    background: var(--us-surface-2);
}

.us-hero-fallback img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.us-hero-fallback .us-hero-words {
    background: linear-gradient(180deg, rgba(31, 26, 43, .15), rgba(31, 26, 43, .7));
    height: 100%;
    max-width: none;
    align-items: center;
    text-align: center;
}

.us-hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .8s ease;
}

.us-hero-slide.is-current { opacity: 1; }

.us-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.us-hero-slide figcaption {
    position: absolute;
    bottom: 3.2rem;
    left: 1.5rem;
    color: #fff;
    font-size: .85rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.us-hero-words {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    padding: 3rem 1.5rem;
    color: #fff;
    /* A gradient rather than a flat wash: the words stay readable over a dark or
       a bright photograph without hiding the picture. */
    background: linear-gradient(to right, rgba(0, 0, 0, .65), transparent);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.us-hero-empty .us-hero-words {
    background: none;
    color: var(--us-text);
    margin: 0 auto;
    text-align: center;
}

.us-hero-words h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 .6rem; font-weight: 800; letter-spacing: -.02em; }
.us-hero-words p { font-size: 1.1rem; margin: 0; opacity: .92; max-width: 34rem; }

.us-hero-dots {
    position: absolute;
    bottom: 1.2rem;
    left: 1.5rem;
    display: flex;
    gap: .5rem;
    z-index: 2;
}

.us-hero-dots button {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .8);
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.us-hero-dots button.is-current { background: #fff; }

/* Highlights */
.us-flags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--us-space-5) var(--us-space-8);
    justify-content: center;
    max-width: 62rem;
    margin: -3rem auto 0;
    padding: var(--us-space-6) var(--us-space-6);
    background: var(--us-surface);
    border-radius: var(--us-radius-lg);
    box-shadow: var(--us-shadow-lg);
}

.us-flag { text-align: center; }
.us-flag strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--us-accent); }
.us-flag span { font-size: .85rem; color: var(--us-text-muted); }

/* Sections */
.us-landing-section { max-width: 60rem; margin: 0 auto; padding: 3rem 1.5rem; }
.us-landing-alt { background: var(--us-surface-2); max-width: none; }
.us-landing-alt > * { max-width: 60rem; margin-inline: auto; }

.us-prose { line-height: 1.7; color: var(--us-text-muted); font-size: 1.02rem; }
.us-prose p { margin: 0 0 1rem; }

/* About/History content sits in an elevated card rather than bare text
   floating on the page background. */
.us-landing-section > h2 + .us-prose,
.us-landing-section > .us-prose {
    background: var(--us-surface);
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-lg);
    box-shadow: var(--us-shadow-sm);
    padding: var(--us-space-6);
}

.us-landing-section h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.us-landing-section h2::before {
    content: "";
    width: .4rem;
    height: 1.6rem;
    border-radius: 3px;
    background: var(--us-accent);
}

/* Staff */
.us-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1.5rem;
}

.us-staff-card {
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-lg);
    padding: var(--us-space-5);
    background: var(--us-surface);
    box-shadow: var(--us-shadow-sm);
    transition: transform var(--us-ease), box-shadow var(--us-ease);
}

.us-staff-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--us-shadow-lg);
}

.us-staff-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--us-radius);
    margin-bottom: .7rem;
}

.us-staff-initials {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: var(--us-radius);
    background: var(--us-surface-2);
    color: var(--us-text-muted);
    font-size: 2rem;
    margin-bottom: .7rem;
}

.us-staff-card h3 { margin: 0 0 .2rem; font-size: 1rem; }
.us-staff-role { margin: 0 0 .5rem; font-size: .85rem; color: var(--us-text-muted); }
.us-staff-bio { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--us-text-muted); }

.us-landing-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--us-space-6);
    justify-content: space-between;
    padding: var(--us-space-8) var(--us-space-6);
    background: var(--us-band);
    color: var(--us-band-muted);
    font-size: .88rem;
}

.us-landing-foot strong { color: var(--us-band-ink); font-size: 1.05rem; }
.us-landing-foot a { color: var(--us-band-muted); }
.us-landing-foot a:hover { color: var(--us-band-ink); }

/* Editor bits */
.us-logo-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.us-logo-preview { max-height: 4rem; max-width: 12rem; }

.us-logo-empty {
    display: grid;
    place-items: center;
    width: 8rem;
    height: 4rem;
    border: 1px dashed var(--us-border);
    border-radius: var(--us-radius);
    color: var(--us-text-muted);
    font-size: .8rem;
}

.us-thumb { width: 5rem; height: 3.2rem; object-fit: cover; border-radius: 4px; display: block; }

/* ── Claiming an account ──────────────────────────────────────────────────── */
/* The sign-up pages carry no signed-in chrome, so the card supplies its own
   width and breathing room rather than inheriting a page layout. */
.us-claim-card { max-width: 26rem; width: 100%; text-align: left; }
.us-claim-card h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
.us-claim-card .us-field { display: block; margin: 1rem 0; }
.us-claim-card .us-field input { width: 100%; }
.us-claim-card .us-btn-primary { width: 100%; margin-top: .5rem; }
.us-claim-card .us-small { margin-top: 1.25rem; }

.login-aside {
    margin-top: var(--us-space-6);
    padding-top: var(--us-space-5);
    border-top: 1px solid var(--us-border);
    font-size: .85rem;
    text-align: center;
    color: var(--us-text-muted);
}

.login-aside a {
    color: var(--us-accent);
    font-weight: 600;
    text-decoration: none;
}

.login-aside a:hover { text-decoration: underline; }

/* ── A trip, as a parent sees it ──────────────────────────────────────────── */
.us-trip { border-top: 1px solid var(--us-border); padding: 1.25rem 0; }
.us-trip:first-of-type { border-top: 0; padding-top: .25rem; }
.us-trip h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.us-trip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.us-trip-cost { font-size: 1.15rem; white-space: nowrap; }
.us-trip-plan ul { margin: .35rem 0 .35rem 1.1rem; padding: 0; }
.us-trip .us-check { display: block; margin: .75rem 0; }
.us-trip .us-btn-primary, .us-trip .us-btn-secondary { margin-top: .5rem; }

/* ── Inline icons ─────────────────────────────────────────────────────────── */
/* Sized in em so an icon follows the text it sits beside rather than needing a
   size per place it is used. */
.us-glyph { width: 1em; height: 1em; vertical-align: -0.125em; flex: none; }
.us-glyph-lead { margin-right: .45em; }

/* ── Collapsible nav sections ────────────────────────────────────────────── */
.us-nav-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 1.05rem .75rem .4rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--us-side-muted);
}

.us-nav-chevron {
    width: .85rem;
    height: .85rem;
    transition: transform .15s ease;
}


.us-nav-chevron.is-open { transform: rotate(180deg); }


/* ── Landing page: single locked viewport, no scroll ─────────────────────── */

html.us-no-scroll, body.us-no-scroll { height: 100%; overflow: hidden; }

.us-landing-immersive {
    position: fixed;
    inset: 0;
    color: #fff;
    overflow: hidden;
}

.us-landing-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--us-band);
}

.us-bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.us-bg-slide.is-current { opacity: 1; }

.us-landing-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(8, 10, 26, .7) 0%,
        rgba(8, 10, 26, .3) 30%,
        rgba(8, 10, 26, .35) 60%,
        rgba(8, 10, 26, .82) 100%
    );
}

/* Everything visible sits in one column filling the screen exactly, top to
   bottom: nav, headline, rotating panels, stats, footer. No element here
   scrolls independently — each is sized to share the fixed viewport. */
.us-landing-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 var(--us-space-6);
}

.us-landing-bar-overlay {
    position: relative;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin: 0 calc(-1 * var(--us-space-6));
    padding-left: var(--us-space-6);
    padding-right: var(--us-space-6);
    flex: 0 0 auto;
    z-index: 20;
}
.us-landing-bar-overlay .us-landing-brand,
.us-landing-bar-overlay nav a:not(.us-btn-primary) { color: #fff; }
.us-landing-bar-overlay nav a:not(.us-btn-primary):hover { color: var(--us-band-muted); }
.us-landing-bar-overlay .us-landing-toggle { color: #fff; }

@media (max-width: 720px) {
    .us-landing-bar-overlay nav {
        background: var(--us-band);
        border-color: rgba(255, 255, 255, .12);
    }
    .us-landing-bar-overlay nav a:not(.us-btn-primary) { color: var(--us-band-muted); }
}

.us-landing-headline {
    flex: 0 0 auto;
    text-align: center;
    padding: var(--us-space-5) 0 var(--us-space-3);
}

/* Fixes headings falling back to the global dark text colour — a class-plus-
   element selector like ".us-content-panel h2" isn't specific enough to beat
   the site-wide "h1, h2, h3" rule, so white has to be stated explicitly here. */
.us-landing-immersive h1,
.us-landing-immersive h2,
.us-landing-immersive h3,
.us-landing-immersive p,
.us-landing-immersive .us-prose { color: #fff; }

.us-landing-headline {
    padding-top: var(--us-space-3);
}

.us-landing-headline h1 {
    font-size: clamp(2.4rem, 6.5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
    /* Layered shadow gives a subtle embossed, 3D feel rather than a flat cutout. */
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .25),
        0 2px 4px rgba(0, 0, 0, .3),
        0 8px 30px rgba(0, 0, 0, .45);
}

.us-landing-headline p {
    font-size: 1.25rem;
    font-weight: 500;
    opacity: .95;
    margin: 0 auto;
    max-width: 34rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* The rotating middle zone — takes whatever space is left between the fixed
   headline above and the fixed stats/footer below. */
.us-landing-panels {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.us-content-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--us-space-3);
    text-align: center;
    padding-left: var(--us-space-4);
    padding-right: var(--us-space-4);
    opacity: 0;
    transform: translateX(2.5rem) scale(.98);
    transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1),
                transform 1.1s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}

.us-content-panel.is-current {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.us-content-panel.is-leaving {
    opacity: 0;
    transform: translateX(-2.5rem) scale(.98);
}

.us-content-panel h2 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 var(--us-space-4);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .2),
        0 2px 4px rgba(0, 0, 0, .3),
        0 6px 24px rgba(0, 0, 0, .4);
}

/* Text directly on the photo — no card, no box. */
.us-content-panel .us-prose {
    max-width: 42rem;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.65;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.us-content-panel .us-prose p { margin: 0 0 .8rem; }

.us-staff-grid-compact { max-width: 46rem; }

.us-staff-glass {
    background: rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, .16) !important;
    color: #fff;
}
.us-staff-glass .us-staff-role { color: rgba(255, 255, 255, .7); }
.us-staff-glass .us-staff-initials { background: rgba(255, 255, 255, .14); color: #fff; }

/* Stats — plain text directly on the photo, pinned above the footer. */
.us-flags-plain {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--us-space-3) var(--us-space-6);
    justify-content: center;
    align-self: center;
    margin-bottom: var(--us-space-4);
    padding: var(--us-space-3) var(--us-space-6);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--us-radius-lg);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
}
.us-flags-plain .us-flag strong {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}
.us-flags-plain .us-flag span {
    font-size: .82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
}

.us-landing-foot-simple {
    flex: 0 0 auto;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .14);
    justify-content: center;
    gap: var(--us-space-4);
    text-align: center;
    padding: var(--us-space-3) 0;
    color: rgba(255, 255, 255, .6);
    font-size: .78rem;
}
.us-landing-foot-simple span:first-child { color: #fff; font-weight: 700; font-size: .88rem; }

@media (max-width: 640px) {
    .us-landing-foot-simple { flex-direction: column; gap: .25rem; }
    .us-landing-headline { padding-top: var(--us-space-4); }
    .us-flags-plain { gap: .3rem var(--us-space-4); }
}

/* ── Top bar heading, mobile nav backdrop & animation overrides ─────────── */
.us-topbar-heading {
    flex: 1 1 auto;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--us-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.us-nav-backdrop { display: none; }

@media (max-width: 640.98px) {
    .us-topbar-heading { font-size: .92rem; }

    .us-nav-toggle { transition: background-color var(--us-ease); }

    .us-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 4;
        background: rgba(31, 26, 43, 0);
        pointer-events: none;
        transition: background-color .28s ease;
    }

    .us-nav-backdrop.is-open {
        background: rgba(31, 26, 43, .45);
        pointer-events: auto;
    }

    .sidebar {
        visibility: hidden;
        opacity: 0;
        transform: translateY(-12px) scale(.98);
        transition: opacity .28s cubic-bezier(.22, .61, .36, 1),
                    transform .28s cubic-bezier(.22, .61, .36, 1),
                    visibility 0s linear .28s;
    }

    .sidebar.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: opacity .28s cubic-bezier(.22, .61, .36, 1),
                    transform .28s cubic-bezier(.22, .61, .36, 1),
                    visibility 0s linear 0s;
        box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    }
}

@media (max-width: 480px) {
    .us-topbar-heading {
        display: block;
        font-size: .8rem;
        max-width: 7rem;
    }
}

/* ── Top bar: the page title in the display face, on a plain surface ────── */
.us-topbar-heading {
    font-family: var(--us-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--us-text);
}

.top-row {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--us-surface);
    border-bottom: 1px solid var(--us-border);
    overflow: hidden;
}

/* Page titles now live in the top bar (mirrored by site.js), so the
   in-page heading is visually hidden rather than removed — removing it
   would mean site.js has nothing left to read the title from. */
article.content > h1:first-child,
.us-page-title {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The subtitle underneath a title (e.g. "Define the stages your school
   runs...") still has value on its own and stays visible, just tightened
   up now that there's no heading above it taking space. */
.us-page-header { margin-bottom: var(--us-space-4); }

/* Aligns the line under the sidebar brand with the top bar's own bottom
   border, so the two form one continuous header row across the layout. */
.us-sidebar-brand {
    height: 3.75rem;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

/* Metric card accent colours — mapped from the Bootstrap-style names the
   dashboard already passes in, driving MetricCard's icon wash and left
   edge via currentColor rather than Bootstrap's own utility classes. */
.us-metric-primary { color: var(--us-accent); }
.us-metric-success { color: var(--us-success); }
.us-metric-warning { color: var(--us-warning); }
.us-metric-danger  { color: var(--us-danger); }
.us-metric-secondary { color: var(--us-text-muted); }

/* ClaimAccount/ClaimStaffAccount reuse .login-card's glass-photo treatment;
   .us-claim-card only adjusts width/alignment on top of it now. */
.us-claim-card { text-align: left; }
.us-claim-card h1.login-title { margin-bottom: var(--us-space-4); }
.us-claim-card .us-field { display: block; margin: .85rem 0; font-weight: 600; font-size: .85rem; }
.us-claim-card .us-field input { width: 100%; margin-top: .35rem; }


/* ── Parent/student portal dashboard ─────────────────────────────────────── */
.us-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--us-space-4);
}

.us-dash-card {
    display: flex;
    align-items: flex-start;
    gap: var(--us-space-4);
    background: var(--us-surface);
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-lg);
    box-shadow: var(--us-shadow-sm);
    padding: var(--us-space-5);
    text-decoration: none;
    color: inherit;
    transition: transform var(--us-ease), box-shadow var(--us-ease), border-color var(--us-ease);
}

.us-dash-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--us-shadow-lg);
    border-color: var(--us-border);
}

.us-dash-card-icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--us-radius);
}
.us-dash-card-icon svg { width: 1.4rem; height: 1.4rem; }

.us-dash-icon-blue { background: var(--us-accent-soft); color: var(--us-accent); }
.us-dash-icon-green { background: var(--us-success-soft); color: var(--us-success); }
.us-dash-icon-red { background: var(--us-danger-soft); color: var(--us-danger); }
.us-dash-icon-purple { background: var(--us-accent-soft); color: var(--us-accent); }

.us-dash-card-body { display: flex; flex-direction: column; min-width: 0; }

.us-dash-card-label {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--us-text-muted);
}

.us-dash-card-value {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--us-text);
    margin-top: .15rem;
}

.us-dash-card-value-small { font-size: 1.05rem; }

.us-dash-card-sub {
    font-size: .78rem;
    color: var(--us-text-muted);
    margin-top: .2rem;
}

/* ── Stat row — used on Attendance, Gradebook, and anywhere else a small
   summary strip of numbers is needed ─────────────────────────────────── */
.us-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--us-space-3);
    margin-bottom: var(--us-space-5);
}

.us-stat {
    position: relative;
    background: var(--us-surface);
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius);
    box-shadow: var(--us-shadow-sm);
    padding: var(--us-space-4);
    text-align: center;
    transition: transform var(--us-ease), box-shadow var(--us-ease);
}

.us-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--us-shadow-md);
}

.us-stat-value {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--us-text);
    line-height: 1.1;
}

.us-stat-label {
    display: block;
    margin-top: .3rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--us-text-muted);
}

.us-stat:first-child .us-stat-value { color: var(--us-accent); }
.us-stat:first-child { border-color: var(--us-accent); background: var(--us-accent-soft); }

.us-stat-value.us-ok { color: #12b76a; }
.us-stat-value.us-bad { color: var(--us-danger); }
.us-stat-value.us-warn { color: #f79009; }

/* ── Parent dashboard: performance-across-subjects line chart ───────────── */
.us-perf-card { margin-top: var(--us-space-5); }

.us-perf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--us-space-3);
}

.us-perf-header h2 { font-size: 1.05rem; margin: 0; }

.us-perf-chart {
    width: 100%;
    height: 14rem;
    overflow: visible;
}

.us-perf-grid {
    stroke: var(--us-border);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.us-perf-axis-label {
    font-size: 8px;
    fill: var(--us-text-muted);
}

.us-perf-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.us-perf-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--us-space-2) var(--us-space-5);
    margin-top: var(--us-space-3);
    padding-top: var(--us-space-3);
    border-top: 1px dashed var(--us-border);
}

.us-perf-legend-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--us-text-muted);
    font-weight: 500;
}

.us-perf-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .us-logout { padding: .5rem; gap: 0; }
    .us-logout-text { display: none; }
}

/* Paying toward a balance: the amount beside its button, wrapping on a phone. */
.us-pay-on-account {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--us-space-3);
    margin-top: var(--us-space-3);
}
.us-pay-on-account label { display: flex; flex-direction: column; gap: .3rem; }
.us-pay-on-account input { max-width: 10rem; }

.us-refresh-btn {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--us-radius-sm);
    background: var(--us-surface);
    border: 1px solid var(--us-border);
    cursor: pointer;
    color: var(--us-text);
    transition: background-color var(--us-ease), border-color var(--us-ease), transform var(--us-ease);
}
.us-refresh-btn:hover { background: var(--us-surface-2); border-color: #ccd1de; }
.us-refresh-btn:active { transform: scale(.94); }
.us-refresh-btn:disabled { opacity: .6; cursor: default; }
.us-refresh-btn :deep(svg) { width: 1.15rem; height: 1.15rem; }


/* ── Page layout framework: tabs, distinct add button, sticky-header
   scrollable tables, full-screen table expand ─────────────────────────── */

.us-page-header-actions { display: flex; gap: var(--us-space-2); }

/* Distinct "Add" button — visually different from ordinary primary/secondary
   buttons so it reads as the one clear entry point for creating something. */
.us-btn-add {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    border: 0;
    border-radius: var(--us-radius-sm);
    background: linear-gradient(135deg, #12b76a, #0d9c5a);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(18, 183, 106, .3);
    transition: transform var(--us-ease), box-shadow var(--us-ease);
    flex-shrink: 0;
}
.us-btn-add:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(18, 183, 106, .4); }
.us-btn-add :deep(svg), .us-btn-add svg { width: 1rem; height: 1rem; }

.us-tab-row {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    margin-bottom: var(--us-space-4);
    border-bottom: 1px solid var(--us-border);
}

.us-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border: 1px solid var(--us-border);
    border-bottom: 0;
    background: var(--us-surface-2);
    color: var(--us-text-muted);
    font-weight: 600;
    font-size: .88rem;
    border-radius: var(--us-radius-sm) var(--us-radius-sm) 0 0;
    cursor: pointer;
    transition: background-color var(--us-ease), color var(--us-ease);
    white-space: nowrap;
}

.us-tab:hover { background: var(--us-surface); color: var(--us-text); }

.us-tab.is-active {
    background: var(--us-surface);
    color: var(--us-accent);
    border-color: var(--us-border);
    box-shadow: 0 -2px 0 var(--us-accent) inset;
}

.us-tab-count {
    background: var(--us-surface-2);
    color: var(--us-text-muted);
    border-radius: 999px;
    padding: .05rem .45rem;
    font-size: .72rem;
    font-weight: 700;
}
.us-tab.is-active .us-tab-count { background: var(--us-accent-soft); color: var(--us-accent); }

.us-stage-header-actions { display: flex; align-items: center; gap: var(--us-space-3); }

.us-btn-expand {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--us-radius-sm);
    border: 1px solid var(--us-border);
    background: var(--us-surface);
    color: var(--us-text-muted);
    cursor: pointer;
    transition: background-color var(--us-ease), color var(--us-ease);
}
.us-btn-expand:hover { background: var(--us-surface-2); color: var(--us-accent); }
.us-btn-expand svg { width: .95rem; height: .95rem; }

/* Sticky table header inside a height-capped, independently scrolling
   table — the heading never scrolls out of view while browsing a long list. */
.us-table-wrap {
    max-height: 24rem;
    overflow-y: auto;
}
.us-table-wrap thead th {
    position: sticky;
    top: 0;
    background: var(--us-surface-2);
    z-index: 1;
}

.us-table-fullscreen-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(31, 26, 43, .55);
    display: grid;
    place-items: center;
    padding: var(--us-space-5);
}

.us-table-fullscreen-panel {
    background: var(--us-surface);
    border-radius: var(--us-radius-lg);
    box-shadow: var(--us-shadow-lg);
    width: 100%;
    max-width: 72rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: var(--us-space-5);
}

.us-table-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--us-space-4);
}
.us-table-fullscreen-header h2 { margin: 0; font-size: 1.1rem; }

.us-table-tall { max-height: none; flex: 1 1 auto; }

@media (max-width: 640.98px) {
    .us-page-header { flex-direction: column; align-items: stretch; }
    .us-btn-add { justify-content: center; }
}

/* ── Table search/filter bar ─────────────────────────────────────────────── */
.us-table-toolbar {
    display: flex;
    align-items: center;
    gap: var(--us-space-3);
    margin-bottom: var(--us-space-3);
    flex-wrap: wrap;
}

.us-search-box {
    position: relative;
    flex: 1 1 16rem;
    max-width: 22rem;
}

.us-search-box input {
    width: 100%;
    padding-left: 2.1rem;
}

.us-search-box svg {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--us-text-muted);
    pointer-events: none;
}

.us-filter-select {
    flex: 0 0 auto;
}

/* ── Mobile responsiveness for the new page-layout framework ────────────── */
@media (max-width: 640.98px) {
    .us-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--us-space-3);
    }

    .us-btn-add {
        width: 100%;
        justify-content: center;
    }

    .us-tab {
        font-size: .82rem;
        padding: .5rem .8rem;
    }

    .us-table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .us-search-box {
        max-width: none;
        flex: 1 1 auto;
    }

    .us-stage-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--us-space-2);
    }

    .us-stage-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .us-table-fullscreen-panel {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .us-table-fullscreen-backdrop { padding: 0; }
}

/* The amount to pay on one ticked invoice, under what it owes. */
.us-pay-part {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .35rem;
    font-size: .8rem;
    white-space: nowrap;
}
.us-pay-part input { width: 7rem; }

/* Choosing the school's own colour: the picker, a hex box for a brand value
   copied from elsewhere, a few presets, and the sidebar as it will look. */
.us-colour-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--us-space-3);
    margin-bottom: var(--us-space-3);
}
.us-colour-input {
    width: 3.5rem;
    height: 2.5rem;
    padding: 2px;
    cursor: pointer;
}
.us-colour-hex { width: 7.5rem; font-family: var(--us-font-mono, monospace); }
.us-colour-presets { display: flex; gap: .4rem; }
.us-colour-swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--us-border);
    cursor: pointer;
    padding: 0;
}
.us-colour-swatch:hover { outline: 2px solid var(--us-side-accent); }
.us-sidebar-preview {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 22rem;
    height: 4.5rem;
    border-radius: var(--us-radius);
    padding: .6rem .8rem;
    margin-bottom: var(--us-space-3);
    color: #fff;
    font-size: .8rem;
}
/* Choosing which levels a reporting period covers: one block per stage, its
   levels wrapping beneath so a long list stays readable. */
.us-level-group {
    padding: var(--us-space-3) 0;
    border-top: 1px solid var(--us-border);
}
.us-level-checks {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    margin-top: .35rem;
}
.us-level-checks .us-check { margin: 0; }
/* Taking a mark sheet away as a file and bringing it back. The upload is a
   label wrapping a hidden file input, so it sits beside the two downloads
   as one row of buttons rather than a button and a stray browse control. */
.us-sheet-transfer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--us-space-2);
    margin-bottom: var(--us-space-4);
}
.us-upload-label { cursor: pointer; }
.us-upload-label input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.us-import-preview {
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius);
    padding: var(--us-space-4);
    margin-bottom: var(--us-space-4);
    background: var(--us-surface-2);
}
/* What the class teacher and the head wrote, set apart from the marks. */
.us-remark {
    border-left: 3px solid var(--us-side-accent);
    padding: .25rem 0 .25rem var(--us-space-3);
    margin-top: var(--us-space-4);
}
.us-remark p { margin: .25rem 0; }

/* One comment box per subject on the teachers' page, and the save bar that
   follows the page down so a long class does not mean scrolling back. */
.us-comment-block { padding: var(--us-space-3) 0; border-top: 1px solid var(--us-border); }
.us-comment-block label { display: block; }
.us-comment-block textarea { width: 100%; margin-top: .3rem; }

.us-sticky-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--us-space-3);
    padding: var(--us-space-3);
    background: var(--us-surface);
    border-top: 1px solid var(--us-border);
}

/* ── The band: a block of jacaranda at the top of a page ──────────────────
   The one loud thing on a screen. Everything inside it re-points the shared
   tokens rather than restyling each component, so a MetricCard or a loading
   skeleton dropped in here becomes a translucent tile on violet without
   knowing it is in a band. */
.us-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 22px;
    background: var(--us-band);
    color: var(--us-band-ink);

    --us-surface: var(--us-band-card);
    --us-surface-2: var(--us-band-card);
    --us-border: transparent;
    --us-text: var(--us-band-ink);
    --us-text-primary: var(--us-band-ink);
    --us-text-muted: var(--us-band-muted);
    --us-skeleton-color: var(--us-band-track);
    --us-ring-track: var(--us-band-track);
    --us-shadow-sm: none;
    --us-shadow-md: none;
}

/* Status colours would vanish on violet; inside the band the figures speak
   for themselves and every icon takes the band's own ink. */
.us-band .metric-card { color: var(--us-band-ink); }

.us-petals {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.us-petal {
    position: absolute;
    background: var(--us-petal);
    border-radius: 62% 38% 64% 36% / 70% 58% 42% 30%;
}

.us-band-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--us-space-4);
}

.us-band-eyebrow {
    margin: 0;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--us-band-muted);
}

.us-band-title {
    margin: .2rem 0 0;
    font-family: var(--us-font-display);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.us-band-btn {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--us-band-card);
    color: var(--us-band-ink);
    cursor: pointer;
    transition: background-color var(--us-ease);
}

.us-band-btn:hover { background: var(--us-band-track); }
.us-band-btn:focus-visible { outline: 2px solid var(--us-band-ink); outline-offset: 2px; }
.us-band-btn:disabled { cursor: default; opacity: .7; }

@media (max-width: 640.98px) {
    .us-band { padding: 1.1rem; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .us-band-btn { transition: none; }
}

/* The landing page's drifting blurred orbs belonged to the old look. The
   page keeps its photos and gets the violet footer band instead. */
.us-landing-orbs { display: none; }

/* ── Admissions: the public application form and status check ────────────────
   The sign-in field and card, widened for a longer form. The field scrolls
   from the top rather than centring, so a form taller than the screen never
   has its first fields cut off above the fold. */
.us-apply-bg { place-items: start center; padding-block: var(--us-space-6); }
.us-apply-shell { max-width: 46rem; }
.us-apply-card { text-align: left; }
.us-apply-card .login-title { margin-bottom: var(--us-space-2); }

.us-apply-eyebrow {
    margin: 0 0 var(--us-space-1);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--us-accent);
}

.us-apply-lead { color: var(--us-text-muted); margin: 0 0 var(--us-space-5); }

.us-apply-section { border: 0; margin: 0; padding: 0; min-width: 0; }
.us-apply-section + .us-apply-section { margin-top: var(--us-space-3); }

/* The rule sits on the legend, not the fieldset, so it runs above the heading
   rather than through it. */
.us-apply-section > legend.us-apply-section-title {
    width: 100%;
    padding-top: var(--us-space-4);
    border-top: 1px solid var(--us-border);
}

.us-apply-section-title {
    float: none;
    width: auto;
    margin: 0 0 var(--us-space-1);
    padding: 0;
    font-family: var(--us-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--us-text);
}

.us-apply-grid { margin-top: var(--us-space-3); }
.us-apply-grid input,
.us-apply-grid select,
.us-apply-grid textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-sm);
    background: var(--us-surface);
    color: var(--us-text);
    font: inherit;
    font-size: 1rem; /* 16px or more stops phones zooming in on focus */
    font-weight: 400;
}
.us-apply-grid textarea { resize: vertical; }
.us-apply-grid input:focus,
.us-apply-grid select:focus,
.us-apply-grid textarea:focus,
.us-apply-card .login-input:focus {
    outline: 2px solid var(--us-accent);
    outline-offset: 1px;
    border-color: var(--us-accent);
}

.us-apply-card .validation-message { color: var(--us-danger); font-size: .8rem; font-weight: 500; }
.us-apply-card .invalid { outline: 0; border-color: var(--us-danger); }
.us-apply-card .login-error div + div { margin-top: .25rem; }

.us-apply-declaration {
    display: flex;
    gap: var(--us-space-3);
    align-items: flex-start;
    margin: var(--us-space-5) 0 var(--us-space-2);
    padding: var(--us-space-4);
    border-radius: var(--us-radius);
    background: var(--us-accent-soft);
    font-size: .9rem;
    color: var(--us-text);
}
.us-apply-declaration input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--us-accent); }

.us-apply-card .login-button { margin-top: var(--us-space-4); }

/* The honeypot: off-screen rather than display:none, which some form-filling
   scripts know to skip. */
.us-apply-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.us-apply-reference {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: var(--us-space-4) 0;
    padding: var(--us-space-4) var(--us-space-5);
    border-radius: var(--us-radius);
    background: var(--us-band);
    color: var(--us-band-ink);
}
.us-apply-reference span { font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--us-band-muted); }
.us-apply-reference strong { font-family: var(--us-font-display); font-size: 1.6rem; letter-spacing: .02em; }
.us-apply-reference small { color: var(--us-band-muted); }

.us-apply-steps { margin: var(--us-space-2) 0 var(--us-space-5); padding-left: 1.2rem; color: var(--us-text-muted); }
.us-apply-steps li + li { margin-top: var(--us-space-2); }

.us-apply-actions { display: flex; flex-wrap: wrap; gap: var(--us-space-2); margin: var(--us-space-4) 0 0; }
.us-apply-actions a { text-decoration: none; }

.us-apply-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--us-space-2);
    margin: 0 0 var(--us-space-4);
    padding: 0;
    list-style: none;
    font-size: .82rem;
    font-weight: 600;
    color: var(--us-text-muted);
}
.us-apply-track li { display: flex; flex-direction: column; gap: .4rem; }
.us-apply-track-dot { display: block; height: .4rem; border-radius: var(--us-radius-pill); background: var(--us-border); }
.us-apply-track li.is-done .us-apply-track-dot,
.us-apply-track li.is-current .us-apply-track-dot { background: var(--us-accent); }
.us-apply-track li.is-current { color: var(--us-text); }
.us-apply-track li.is-declined .us-apply-track-dot { background: var(--us-text-muted); }

.us-apply-message {
    margin: 0 0 var(--us-space-4);
    padding: var(--us-space-3) var(--us-space-4);
    border-left: 3px solid var(--us-accent);
    border-radius: var(--us-radius-sm);
    background: var(--us-surface-2);
}
.us-apply-message span { font-size: .78rem; font-weight: 600; color: var(--us-text-muted); }
.us-apply-message p { margin: .25rem 0 0; white-space: pre-line; }

@media (max-width: 640.98px) {
    .us-apply-bg { padding: var(--us-space-4); }
    .us-apply-card { padding: var(--us-space-5) var(--us-space-4); border-radius: var(--us-radius-lg); }
}

/* ── Admissions: the office's screens ─────────────────────────────────────── */
.us-adm-status { white-space: nowrap; }
.us-adm-status-received { background: var(--us-accent-soft); border-color: transparent; color: var(--us-accent); }
.us-adm-status-underreview { background: var(--us-warning-soft); border-color: transparent; color: var(--us-warning); }
.us-adm-status-accepted { background: var(--us-success-soft); border-color: transparent; color: var(--us-success); }
.us-adm-status-declined { background: var(--us-danger-soft); border-color: transparent; color: var(--us-danger); }
.us-adm-status-waitinglist { background: var(--us-surface-2); border-color: var(--us-border); color: var(--us-text-muted); }

.us-adm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--us-space-5);
    align-items: start;
}
@media (max-width: 960px) { .us-adm-layout { grid-template-columns: 1fr; } }

.us-adm-panel {
    background: var(--us-surface);
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-lg);
    box-shadow: var(--us-shadow-sm);
    padding: var(--us-space-5);
}
.us-adm-panel + .us-adm-panel { margin-top: var(--us-space-4); }
.us-adm-panel h2 { margin: 0 0 var(--us-space-3); font-family: var(--us-font-display); font-size: 1.05rem; }

.us-adm-facts { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .45rem var(--us-space-4); margin: 0; font-size: .9rem; }
.us-adm-facts dt { color: var(--us-text-muted); font-weight: 500; }
.us-adm-facts dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

.us-adm-form label { display: flex; flex-direction: column; gap: .3rem; margin-bottom: var(--us-space-3); font-size: .82rem; font-weight: 600; }
.us-adm-form input:not([type=checkbox]):not([type=radio]),
.us-adm-form select,
.us-adm-form textarea {
    padding: .5rem .65rem;
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-sm);
    background: var(--us-surface);
    color: var(--us-text);
    font: inherit;
    font-weight: 400;
}
.us-adm-form label.us-check { flex-direction: row; align-items: center; font-weight: 500; }
.us-adm-actions { display: flex; flex-wrap: wrap; gap: var(--us-space-2); }

.us-adm-match {
    display: flex;
    gap: var(--us-space-3);
    align-items: flex-start;
    padding: var(--us-space-3);
    margin-bottom: var(--us-space-2);
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-sm);
    font-size: .88rem;
    font-weight: 400;
    cursor: pointer;
}
.us-adm-match.is-chosen { border-color: var(--us-accent); background: var(--us-accent-soft); }
.us-adm-match input { margin-top: .2rem; accent-color: var(--us-accent); }

.us-adm-note { margin: 0; font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere; }

.us-adm-fieldset { border: 0; margin: 0 0 var(--us-space-3); padding: 0; min-width: 0; }
.us-adm-fieldset legend { float: none; width: auto; margin: 0 0 .3rem; padding: 0; font-size: .82rem; font-weight: 600; }

.us-adm-docs { list-style: none; margin: 0 0 var(--us-space-3); padding: 0; font-size: .9rem; }
.us-adm-docs li { display: flex; align-items: center; gap: var(--us-space-3); padding: var(--us-space-2) 0; border-bottom: 1px solid var(--us-border); }
.us-adm-docs li:last-child { border-bottom: 0; }

.us-adm-thumb {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius-sm);
    background: var(--us-surface-2);
    cursor: zoom-in;
}
.us-adm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.us-adm-thumb:focus-visible { outline: 2px solid var(--us-accent); outline-offset: 2px; }
.us-adm-thumb-pdf {
    cursor: pointer;
    background: var(--us-accent-soft);
    color: var(--us-accent);
    font-family: var(--us-font-display);
    font-weight: 700;
    text-decoration: none;
}

.us-adm-doc-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.us-adm-doc-text strong { overflow-wrap: anywhere; font-weight: 600; }
.us-adm-doc-links { display: flex; gap: var(--us-space-3); }

/* Full-size view of an uploaded picture. */
.us-adm-viewer {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--us-space-3);
    padding: var(--us-space-4);
    background: rgba(31, 26, 43, .86);
    overflow: auto;
}
.us-adm-viewer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--us-space-2);
    width: 100%;
    max-width: 60rem;
    color: var(--us-band-ink);
}
.us-adm-viewer-bar span { flex: 1 1 12rem; font-weight: 600; overflow-wrap: anywhere; }
.us-adm-viewer-bar a { text-decoration: none; }
.us-adm-viewer img {
    max-width: min(100%, 60rem);
    height: auto;
    border-radius: var(--us-radius-sm);
    background: var(--us-surface);
    box-shadow: var(--us-shadow-lg);
}

.us-apply-grid input[type=file] { padding: .5rem; font-size: .9rem; background: var(--us-surface-2); cursor: pointer; }
.us-apply-grid input[type=file]::file-selector-button {
    margin-right: var(--us-space-3);
    padding: .4rem .9rem;
    border: 0;
    border-radius: var(--us-radius-pill);
    background: var(--us-accent-soft);
    color: var(--us-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ── Backup & Restore ────────────────────────────────────────────────────── */
.us-bk-job { margin-bottom: var(--us-space-4); border-left: 4px solid var(--us-accent); }
.us-bk-job.is-ok { border-left-color: var(--us-success); }
.us-bk-job.is-failed { border-left-color: var(--us-danger); }
.us-bk-job .us-adm-note { margin-bottom: var(--us-space-2); }

.us-bk-list { list-style: none; margin: 0; padding: 0; }
.us-bk-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--us-space-2) var(--us-space-3);
    padding: var(--us-space-3) 0;
    border-bottom: 1px solid var(--us-border);
}
.us-bk-list > li:last-child { border-bottom: 0; }
.us-bk-list > li.is-chosen { border-bottom: 0; }
.us-bk-when { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.us-bk-list > li.us-bk-confirm {
    display: block;
    margin-bottom: var(--us-space-2);
    padding: var(--us-space-4);
    border: 1px solid var(--us-danger);
    border-radius: var(--us-radius);
    background: var(--us-danger-soft);
}
.us-bk-confirm p { margin: 0 0 var(--us-space-3); font-size: .9rem; }

.us-bk-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.us-bk-help { margin-bottom: var(--us-space-3); font-size: .86rem; }
.us-bk-help summary { cursor: pointer; font-weight: 600; color: var(--us-accent); }
.us-bk-help ol { margin: var(--us-space-2) 0 0; padding-left: 1.2rem; }
.us-bk-help li + li { margin-top: .3rem; }

.us-adm-history { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.us-adm-history li { padding: var(--us-space-2) 0; border-bottom: 1px solid var(--us-border); }
.us-adm-history li:last-child { border-bottom: 0; }
.us-adm-history p { margin: .2rem 0 0; white-space: pre-line; }