/* ── Design tokens ──────────────────────────────────────────────────────────
   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. The sidebar keeps
   its own dark palette in both themes — it is a deliberately dark surface — but
   its text tokens are defined here so nothing falls back to a browser default
   link colour on top of it. */
:root {
    /* Type ------------------------------------------------------------- */
    --us-font: 'Inter', 'Helvetica Neue', Helvetica, Arial, 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 */
    --us-radius-sm: 8px;
    --us-radius: 12px;
    --us-radius-lg: 16px;

    /* Colour ------------------------------------------------------------ */
    --us-bg: #f0f1f4;
    --us-surface: #ffffff;
    --us-surface-2: #f8f9fc;
    --us-border: #e4e7ee;
    --us-text: #14172b;
    --us-text-muted: #676d85;
    --us-accent: #4550e5;
    --us-accent-hover: #3740c4;
    --us-danger: #c0201a;
    --us-accent-soft: #eef0ff;

    --us-shadow: 0 1px 2px rgba(20, 23, 43, .04), 0 8px 24px rgba(20, 23, 43, .06);
    --us-shadow-sm: 0 1px 2px rgba(20, 23, 43, .05);
    --us-shadow-md: 0 6px 16px rgba(20, 23, 43, .08);
    --us-shadow-lg: 0 12px 32px rgba(20, 23, 43, .12);

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

    /* Sidebar — richer, more saturated than a flat corporate navy so it reads
       as a deliberate brand colour rather than "default dark mode". */
    --us-side-from: #0b1733;
    --us-side-to: #112a57;
    --us-side-text: #cdd1f2;
    --us-side-text-strong: #ffffff;
    --us-side-muted: #9198c9;
    --us-side-hover: rgba(255, 255, 255, .1);
    --us-side-active: rgba(148, 163, 255, .22);
    --us-side-border: rgba(255, 255, 255, .1);
    --us-side-accent: #9db4ff;

    /* 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);
}
@media (prefers-color-scheme: dark) {
    :root {
        /* 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: #0f1320;
        --us-surface: #171c2c;
        --us-surface-2: #1d2334;
        --us-border: #2a3145;
        --us-text: #e6eaf5;
        --us-text-muted: #99a3bd;
        --us-accent: #8ea6ff;
        --us-danger: #ff9d95;
        --us-accent-soft: #1e2540;
        --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-ring-track: #2a3145;
        --us-skeleton-color: #232a3d;

        /* Slightly deeper than the light-theme sidebar so it still reads as a
           distinct surface against the darker page background. */
        --us-side-from: #0a1733;
        --us-side-to: #0e2449;
        --us-side-border: rgba(255, 255, 255, .06);
    }
}

html, body {
    color: var(--us-text);
    background:
        radial-gradient(90% 60% at 15% -10%, rgba(17, 24, 39, .035), transparent 55%),
        radial-gradient(70% 50% at 100% 0%, rgba(17, 24, 39, .025), transparent 60%),
        var(--us-bg);
    background-attachment: fixed;
}

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

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--us-text);
}

/* 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: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.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);
}

/* Full-bleed photographic background for the login page specifically —
   BlankLayout is shared with ClaimAccount/ClaimStaffAccount too, so this
   lives scoped to .login-bg rather than changing every chromeless page. */
.login-bg {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--us-space-5);
    background: #0a0c1e;
    overflow: hidden;
}

.login-bg-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(10, 12, 30, .78), rgba(20, 15, 45, .62));
}

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

.login-card {
    background: color-mix(in srgb, var(--us-surface) 97%, transparent);
    backdrop-filter: blur(6px);
    border-radius: var(--us-radius-lg);
    padding: var(--us-space-8) var(--us-space-6) var(--us-space-6);
    box-shadow: 0 20px 60px rgba(10, 12, 30, .35);
    text-align: center;
}

.login-brand-mark {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 auto var(--us-space-4);
    border-radius: var(--us-radius);
    color: #fff;
    background: linear-gradient(140deg, #6a7cfa, #a35bfa);
    box-shadow: 0 8px 20px rgba(106, 124, 250, .45);
}
.login-brand-mark svg { width: 1.7rem; height: 1.7rem; }

.login-title { margin: 0; font-size: 1.5rem; font-weight: 700; 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: 8px;
    font-size: .95rem;
}

.login-input:focus {
    outline: 2px solid #3b5bdb;
    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-sm);
    background: linear-gradient(135deg, var(--us-accent), #6a4ce8);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    margin-top: var(--us-space-2);
    box-shadow: 0 4px 14px rgba(69, 80, 229, .35);
    transition: transform var(--us-ease), box-shadow var(--us-ease);
}

.login-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(69, 80, 229, .45);
}

.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: #fef3f2;
    border: 1px solid #fda29b;
    color: #b42318;
    padding: .65rem .8rem;
    border-radius: 8px;
    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; }

@media (prefers-color-scheme: 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: linear-gradient(135deg, rgba(69, 80, 229, .18), transparent 40%);
    -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: #d6dae8;
    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: linear-gradient(135deg, var(--us-accent), #6a4ce8);
    color: #fff;
    border: 0;
    box-shadow: 0 2px 8px rgba(69, 80, 229, .3);
}

.us-btn-primary:hover {
    box-shadow: 0 4px 14px rgba(69, 80, 229, .4);
    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; }

.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:
        radial-gradient(120% 60% at 0% 0%, rgba(120, 155, 255, .22), transparent 60%),
        radial-gradient(90% 55% at 100% 100%, rgba(80, 130, 230, .18), transparent 65%),
        linear-gradient(170deg, var(--us-side-from) 0%, var(--us-side-to) 100%);
    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.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(140deg, #6a7cfa, #a35bfa);
    box-shadow: 0 6px 18px rgba(106, 124, 250, .5);
}

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

.us-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.us-brand-text strong { color: var(--us-side-text-strong); font-size: 1.02rem; letter-spacing: .01em; }
.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, tinted scrollbar instead of the browser's grey default, which
       looked out of place against a coloured sidebar. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.us-nav-list::-webkit-scrollbar { width: 6px; }
.us-nav-list::-webkit-scrollbar-track { background: transparent; }
.us-nav-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    border-radius: 999px;
}
.us-nav-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .35); }

.us-nav-section {
    padding: 1.05rem .75rem .4rem;
    font-size: .68rem;
    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: .62rem .75rem;
    margin-bottom: .15rem;
    border-radius: 9px;
    color: var(--us-side-text);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    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;
}

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

/* Accent bar marks the current page without relying on colour alone. */
.us-nav-link.active::before {
    content: "";
    position: absolute;
    left: -.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.35rem;
    border-radius: 0 3px 3px 0;
    background: var(--us-side-accent);
}

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

.us-nav-link.active .us-nav-icon { opacity: 1; color: var(--us-side-accent); }

.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-side-text-strong);
    background: var(--us-side-active);
    border: 1px solid var(--us-side-border);
}

/* ── 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; }

.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); }

@media (prefers-color-scheme: dark) {
    .us-chip-ok { background: #10291d; border-color: #1f5b3a; color: #75e0a7; }
    .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;
}

@media (prefers-color-scheme: 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; }

@media (prefers-color-scheme: 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:
        radial-gradient(60% 40% at 10% 8%, rgba(69, 80, 229, .06), transparent 60%),
        radial-gradient(50% 35% at 92% 28%, rgba(163, 91, 250, .05), transparent 60%),
        radial-gradient(45% 35% at 15% 85%, rgba(69, 80, 229, .05), transparent 60%);
}

/* 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: #fff; }

.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(10, 12, 30, .15), rgba(10, 12, 30, .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: linear-gradient(180deg, var(--us-accent), #a35bfa);
}

/* 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: linear-gradient(160deg, #14173a, #0e1030);
    color: #b6bcda;
    font-size: .88rem;
}

.us-landing-foot strong { color: #fff; font-size: 1.05rem; }
.us-landing-foot a { color: #b6bcda; }
.us-landing-foot a:hover { color: #fff; }

/* 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: #0a0c1e;
}

.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: #cfd4ff; }
.us-landing-bar-overlay .us-landing-toggle { color: #fff; }

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

.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(10, 12, 30, 0);
        pointer-events: none;
        transition: background-color .28s ease;
    }

    .us-nav-backdrop.is-open {
        background: rgba(10, 12, 30, .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;
    }
}

/* ── Reverting sidebar to its original palette, styling the topbar heading
   to match it, and a subtle sheen on the (still white) top bar ──────────── */

:root {
    --us-side-from: #0b1733;
    --us-side-to: #112a57;
    --us-side-text: #c7cce8;
    --us-side-muted: #838cb5;
    --us-side-hover: rgba(255, 255, 255, .08);
    --us-side-active: rgba(129, 148, 255, .18);
    --us-side-border: rgba(255, 255, 255, .09);
    --us-side-accent: #8ea6ff;
}

.us-sidebar {
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(110, 140, 255, .20), transparent 60%),
        radial-gradient(90% 50% at 100% 100%, rgba(70, 120, 220, .16), transparent 65%),
        linear-gradient(170deg, var(--us-side-from) 0%, var(--us-side-to) 100%);
}

/* Page title in the top bar, coloured with the same gradient as the sidebar
   brand mark, rather than plain body text — ties the two together visually. */
.us-topbar-heading {
    background: linear-gradient(135deg, var(--us-side-to), var(--us-side-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

/* On a dark top bar the sidebar's deep purple disappears, so the title runs
   from the accent to near-white instead. */
@media (prefers-color-scheme: dark) {
    .us-topbar-heading {
        background: linear-gradient(135deg, var(--us-side-accent), #e6eaf5);
        -webkit-background-clip: text;
        background-clip: text;
    }
}

/* A soft diagonal streak of light across the white top bar — a "sheen"
   rather than a colour change. */
.top-row {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(135deg, var(--us-surface) 0%, var(--us-surface-2) 55%, var(--us-surface) 100%);
    overflow: hidden;
}

.top-row::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(140, 160, 255, .12) 45%,
        rgba(255, 255, 255, 0) 62%
    );
    pointer-events: none;
}

/* 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: #12b76a; }
.us-metric-warning { color: #f79009; }
.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: #d6dae8;
}

.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: #ecfdf3; color: #12b76a; }
.us-dash-icon-red { background: #fef3f2; color: var(--us-danger); }
.us-dash-icon-purple { background: #f3e8ff; color: #9d5bfa; }

.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(10, 12, 30, .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);
}