:root {
    --purple-950: #24113f;
    --purple-900: #32145c;
    --purple-800: #431b7a;
    --purple-700: #5b21b6;
    --purple-600: #6d35cc;
    --purple-500: #7c4ad9;
    --purple-100: #eee7fb;
    --purple-50: #f8f5fe;
    --blue-800: #124c8f;
    --blue-700: #1769c2;
    --blue-600: #2183df;
    --blue-100: #e2f1ff;
    --blue-50: #f2f8ff;
    --ink: #181528;
    --ink-soft: #5e5a6e;
    --line: #e7e4ed;
    --surface: #ffffff;
    --surface-soft: #f8f7fb;
    --success: #13795b;
    --danger: #b42318;
    --shadow-sm: 0 8px 28px rgba(40, 24, 70, 0.08);
    --shadow-lg: 0 24px 70px rgba(40, 24, 70, 0.16);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --container: 1180px;
    /* Stage 5B.6E — Staff Portal panel & form system */
    --panel-border: rgba(91, 33, 182, 0.20);
    --panel-border-strong: rgba(91, 33, 182, 0.34);
    --panel-surface: #ffffff;
    --panel-surface-soft: var(--purple-50);
    --panel-radius: 16px;
    --panel-radius-sm: 12px;
    --panel-shadow: 0 10px 30px rgba(40, 24, 70, 0.07);
    --panel-shadow-hover: 0 16px 40px rgba(40, 24, 70, 0.12);
    --field-border: rgba(91, 33, 182, 0.24);
    --field-focus-ring: rgba(91, 33, 182, 0.20);
}

/* Subjects workspace modal and form styles. */
.staff-portal .modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.staff-portal .modal-content {
    background: white;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.staff-portal .modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.staff-portal .modal-head h2 {
    margin: 0;
    font-size: 1.25rem;
}

.staff-portal .modal-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staff-portal .modal-close-btn:hover {
    color: #333;
}

.staff-portal .staff-form {
    padding: 1.5rem;
}

.staff-portal .staff-form fieldset {
    margin-bottom: 1.5rem;
    border: none;
    padding: 0;
}

.staff-portal .staff-form legend {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    display: block;
}

/* ---- Subject workspace (All Subjects) — Add/Edit Subject modal -------------- */
/* Two columns of Class mini-cards need a little more room than the shared 600px modal. */
#subject-modal .modal-content {
    max-width: 720px;
}

/* The shared .staff-form rule sizes every control as a 44px field, which inflates a
   checkbox. The Subject checkboxes opt back out to a compact box; the surrounding label
   keeps the click target and the focus ring stays on the real control. */
.staff-main .staff-form .subject-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: #fff;
    accent-color: var(--purple-600);
    cursor: pointer;
}

.staff-main .staff-form .subject-check:focus-visible {
    outline: 3px solid var(--purple-600);
    outline-offset: 2px;
}

/* Subject Details — Subject Name 75% / Subject Code 25%, Active on its own row. */
.staff-main .staff-form .subject-details {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 12px 16px;
    align-items: end;
}

.staff-main .staff-form .subject-details__active {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-self: end;
    gap: 9px;
    font-weight: 500;
    cursor: pointer;
}

/* Classes & Categories — one bordered mini-card per Class, everything on a single row. */
.staff-main .staff-form .subject-class-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.staff-portal .subject-class-card {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius-sm);
    background: var(--panel-surface);
    transition: border-color .15s ease, background-color .15s ease;
}

.staff-portal .subject-class-card.is-selected {
    border-color: var(--purple-600);
    background: var(--panel-surface-soft);
    box-shadow: 0 0 0 1px var(--purple-600) inset;
}

.staff-main .staff-form .subject-class-card__pick {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.staff-portal .subject-class-card__name {
    min-width: 3.25rem;
}

/* Junior classes show a fixed General indicator; Senior classes show the real selector. */
.staff-portal .subject-class-card__fixed {
    align-self: center;
    margin-right: 12px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.staff-portal .subject-class-card.is-selected .subject-class-card__fixed {
    color: var(--purple-800);
    font-weight: 800;
}

/* Departments: a compact checkbox dropdown that looks like the select it replaces, on its own row under the Class name. The menu
   opens in the flow of the card (no floating layer), so it can neither be clipped by the card nor cover another control; the card
   simply grows while it is open. */
.staff-main .staff-form .subject-dept-picker {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
    padding: 0 12px 11px;
    font-size: 12px;
}

.staff-main .staff-form .subject-dept-picker__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--field-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.staff-main .staff-form .subject-dept-picker__summary::-webkit-details-marker {
    display: none;
}

.staff-main .staff-form .subject-dept-picker__summary::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.staff-main .staff-form .subject-dept-picker[open] > .subject-dept-picker__summary::after {
    transform: translateY(2px) rotate(-135deg);
}

.staff-main .staff-form .subject-dept-picker__summary:focus-visible {
    outline: 2px solid var(--purple-600);
    outline-offset: 2px;
}

.staff-main .staff-form .subject-dept-picker__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-main .staff-form .subject-dept-picker__menu {
    margin-top: 4px;
    padding: 4px;
    border: 1px solid var(--field-border);
    border-radius: 8px;
    background: #fff;
}

.staff-main .staff-form .subject-dept-picker__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.staff-main .staff-form .subject-dept-picker__option:hover {
    background: var(--panel-surface-soft);
}

/* The Department control is hidden, not merely collapsed, until its Class is selected. */
.staff-portal .subject-class-card [hidden] {
    display: none;
}

@media (max-width: 600px) {
    .staff-main .staff-form .subject-details {
        grid-template-columns: 1fr;
    }

    .staff-main .staff-form .subject-details__active {
        justify-self: start;
    }

    .staff-main .staff-form .subject-class-grid {
        grid-template-columns: 1fr;
    }
}

.staff-portal .modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.staff-portal .form-hint {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

/* ---- Phase 8 — Academic Progression confirmation modal ------------------------------- */
/* Built on the shared .modal components above; only the summary layout is new. The dialog
   lists what the run WILL do, grouped by what the administrator is confirming, so the
   consequence of pressing Confirm & Save is readable at a glance on any screen size. */
#ap-confirm-modal .modal-content {
    max-width: 640px;
}

#ap-confirm-modal[hidden] {
    display: none;
}

.ap-summary {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.ap-summary__group {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid #e0e0e0;
}

.ap-summary__group:last-child {
    border-bottom: 0;
}

.ap-summary__group > dt {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666;
}

.ap-summary__rows {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
    margin: 0;
}

.ap-summary__rows dt {
    margin: 0;
    font-weight: 400;
    color: #333;
}

.ap-summary__rows dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ap-summary__note {
    margin: 0.35rem 0 0;
    color: #666;
    font-size: 0.9rem;
}

.ap-confirm-note {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    color: #333;
    font-size: 0.9rem;
}

.ap-error {
    display: block;
    margin-top: 0.35rem;
    color: #b3261e;
    font-size: 0.9rem;
}

.ap-error[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .ap-summary__rows {
        grid-template-columns: 1fr;
    }

    .ap-summary__rows dd {
        text-align: left;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--surface);
    font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body.nav-open {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3,
.brand,
.button {
    font-family: "Manrope", "DM Sans", sans-serif;
}

h1,
h2,
h3 {
    line-height: 1.14;
    letter-spacing: -0.035em;
}

p:last-child {
    margin-bottom: 0;
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    color: #fff;
    background: var(--ink);
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid rgba(33, 131, 223, 0.48);
    outline-offset: 3px;
}

.topbar {
    color: rgba(255, 255, 255, 0.84);
    background: var(--purple-950);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
}

.topbar p {
    margin: 0;
}

.topbar__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: #71d8ff;
    box-shadow: 0 0 0 4px rgba(113, 216, 255, 0.12);
}

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid rgba(78, 56, 112, 0.08);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    text-decoration: none;
}

.brand__copy {
    display: grid;
    line-height: 1;
}

.brand__copy strong {
    font-size: 18px;
    letter-spacing: -0.04em;
    /* School-name identity treatment: deep brand purple wherever the name is serving as
       the interface identity (public/auth headers, login and change-password shells).
       Dark shells re-assert a light colour below for contrast. */
    color: var(--purple-800);
}

.brand__copy small {
    margin-top: 4px;
    color: var(--purple-700);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.site-nav > a:not(.button) {
    position: relative;
    padding: 10px 11px;
    color: #565064;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 180ms ease;
}

.site-nav > a:not(.button)::after {
    position: absolute;
    right: 11px;
    bottom: 4px;
    left: 11px;
    height: 2px;
    border-radius: 3px;
    background: var(--purple-700);
    content: "";
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
}

.site-nav > a:hover,
.site-nav > a.is-active {
    color: var(--purple-700);
}

.site-nav > a:hover::after,
.site-nav > a.is-active::after {
    transform: scaleX(1);
}

.nav-portal {
    margin-left: 10px;
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 11px;
    border: 0;
    border-radius: 10px;
    background: var(--purple-50);
}

.nav-toggle > span:not(.sr-only) {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px 0;
    border-radius: 4px;
    background: var(--purple-900);
    transition: 180ms ease;
}

/* Post-Omega X1-A — mobile-only left drawer backdrop; hidden (no box, no layout
   participation) above the mobile breakpoint, matching the .nav-toggle pattern above. */
.site-nav-backdrop {
    display: none;
}

/* Pre-X1-D interaction stabilization — shared Public/Staff mobile drawer handle. */
.mobile-nav-handle {
    display: none;
    position: fixed;
    z-index: 41;
    top: 50%;
    left: var(--mobile-nav-handle-left, 0px);
    width: 38px;
    height: 58px;
    padding: 0;
    border: 1px solid rgba(91, 33, 182, 0.42);
    border-left: 0;
    border-radius: 0 18px 18px 0;
    color: var(--purple-800);
    background: #fff;
    box-shadow: 5px 0 16px rgba(40, 16, 78, 0.18);
    transform: translateY(-50%);
    cursor: ew-resize;
    touch-action: pan-y;
    transition: left 200ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.mobile-nav-handle:hover,
.mobile-nav-handle:focus-visible {
    border-color: var(--purple-600);
    background: var(--purple-50);
    box-shadow: 5px 0 18px rgba(40, 16, 78, 0.26);
}
.mobile-nav-handle:focus-visible {
    outline: 3px solid rgba(33, 131, 223, 0.48);
    outline-offset: 2px;
}
.mobile-nav-handle__icon { display: block; width: 18px; height: 18px; margin: auto; }
.mobile-nav-handle__icon--close { display: none; }
.mobile-nav-handle[aria-expanded="true"] {
    left: var(--mobile-nav-handle-left, min(280px, 85vw));
}
.mobile-nav-handle[aria-expanded="true"] .mobile-nav-handle__icon--open { display: none; }
.mobile-nav-handle[aria-expanded="true"] .mobile-nav-handle__icon--close { display: block; }
.mobile-nav-handle.is-dragging { transition: none; }

.button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 12px 12px 12px 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

/* `.button { display: inline-flex }` above has the same specificity as the browser's default
   `[hidden] { display: none }` and loads later, so it silently wins and a script setting
   `el.hidden = true` on a `.button`-classed element (Add Payment when a balance reaches zero,
   Mark as Delivered once delivered, etc.) has no visible effect. `.button[hidden]` outranks the
   bare `.button` rule, restoring `hidden`'s normal behavior for every button everywhere, current
   and future, without needing every call site to also set `style.display` explicitly. */
.button[hidden] {
    display: none;
}

.button:hover {
    transform: translateY(-2px);
}

.button--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--purple-700), var(--purple-600));
    box-shadow: 0 12px 26px rgba(91, 33, 182, 0.23);
}

.button--primary:hover {
    box-shadow: 0 16px 34px rgba(91, 33, 182, 0.3);
}

.button--ghost {
    border-color: #dcd6e7;
    color: var(--purple-800);
    background: #fff;
}

.button--ghost:hover {
    border-color: var(--purple-500);
}

.button--white {
    color: var(--purple-900);
    background: #fff;
    box-shadow: 0 12px 30px rgba(20, 11, 38, 0.17);
}

.button--sm {
    min-height: 42px;
    padding: 10px 15px;
    font-size: 13px;
}

.button--full {
    width: 100%;
}

.flash-wrap {
    position: relative;
    z-index: 80;
}

.flash {
    position: absolute;
    top: 16px;
    right: 0;
    max-width: 520px;
    padding: 14px 18px;
    border: 1px solid;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.flash--success {
    border-color: #98dbc6;
    color: var(--success);
}

.flash--error {
    border-color: #f2a6a0;
    color: var(--danger);
}

.hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.89) 52%, rgba(247,242,255,0.8) 100%),
        radial-gradient(circle at 90% 10%, #d9c9ff 0, transparent 43%);
}

.hero::before {
    position: absolute;
    inset: 0;
    opacity: 0.36;
    background-image: radial-gradient(rgba(91, 33, 182, 0.17) 0.7px, transparent 0.7px);
    background-size: 18px 18px;
    content: "";
    mask-image: linear-gradient(to right, transparent, #000);
}

.hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 690px;
    align-items: center;
    grid-template-columns: minmax(0, 1.03fr) minmax(440px, 0.97fr);
    gap: 72px;
    padding-block: 84px 94px;
}

.hero__copy {
    max-width: 660px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: var(--purple-700);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eyebrow > span {
    width: 23px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.eyebrow--light {
    color: #9edcff;
}

.hero h1 {
    max-width: 700px;
    margin-bottom: 24px;
    font-size: clamp(46px, 5.2vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.062em;
}

.hero h1 em {
    color: var(--purple-700);
    font-style: normal;
}

.hero__copy > p {
    max-width: 610px;
    margin-bottom: 30px;
    color: var(--ink-soft);
    font-size: 18px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero__trust {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
}

.hero__trust p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.4;
}

.hero__trust strong {
    color: var(--ink);
    font-size: 13px;
}

.avatar-stack {
    display: flex;
}

.avatar-stack span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    margin-left: -7px;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--purple-700);
    font-size: 10px;
    font-weight: 800;
}

.avatar-stack span:first-child {
    margin-left: 0;
    background: var(--blue-700);
}

.avatar-stack span:last-child {
    background: var(--ink);
}

.hero-visual {
    position: relative;
    min-height: 510px;
}

.hero-visual__orb {
    position: absolute;
    top: 44px;
    right: 5px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(91, 33, 182, 0.13);
    border-radius: 44% 56% 61% 39% / 49% 38% 62% 51%;
    background: linear-gradient(145deg, rgba(110, 53, 204, 0.12), rgba(33, 131, 223, 0.1));
    transform: rotate(9deg);
}

.hero-visual__orb::before,
.hero-visual__orb::after {
    position: absolute;
    border: 1px solid rgba(91, 33, 182, 0.1);
    border-radius: inherit;
    content: "";
}

.hero-visual__orb::before {
    inset: 25px -18px -16px 18px;
}

.hero-visual__orb::after {
    inset: 64px -42px -38px 57px;
}

.hero-card {
    position: absolute;
    background: #fff;
    box-shadow: var(--shadow-lg);
}

.hero-card--main {
    z-index: 2;
    top: 52px;
    right: 42px;
    width: min(405px, 88%);
    overflow: hidden;
    border: 1px solid rgba(105, 74, 155, 0.14);
    border-radius: 28px 28px 28px 9px;
    transform: rotate(1.2deg);
}

.hero-card__top {
    display: flex;
    min-height: 64px;
    align-items: center;
    gap: 9px;
    padding: 0 23px;
    border-bottom: 1px solid #eeeaf5;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35bf8b;
    box-shadow: 0 0 0 4px rgba(53, 191, 139, 0.12);
}

.hero-card__tag {
    margin-left: auto;
    padding: 5px 8px;
    border-radius: 20px;
    color: var(--success);
    background: #e6f7f1;
    font-size: 9px;
}

.hero-card__content {
    padding: 35px 34px 37px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(67, 165, 244, 0.32), transparent 34%),
        linear-gradient(145deg, var(--purple-950), var(--purple-800));
}

.mini-label {
    color: var(--purple-500);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.hero-card__content .mini-label {
    color: #9edcff;
}

.hero-card__content h2 {
    margin: 15px 0 34px;
    font-size: 35px;
    line-height: 1.08;
}

.progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
}

.progress-track span {
    display: block;
    width: 78%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #70d4ff, #a88bff);
}

.progress-copy {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
}

.progress-copy strong {
    color: #fff;
}

.hero-card--float {
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 212px;
    padding: 14px 16px;
    border: 1px solid rgba(109, 80, 151, 0.13);
    border-radius: 16px 16px 16px 5px;
}

.hero-card--float strong,
.hero-card--float small {
    display: block;
}

.hero-card--float strong {
    margin-bottom: 2px;
    font-size: 13px;
}

.hero-card--float small {
    color: var(--ink-soft);
    font-size: 10px;
}

.hero-card--classes {
    top: 26px;
    left: -15px;
}

.hero-card--values {
    right: -12px;
    bottom: 40px;
}

.float-icon {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
}

.float-icon--purple {
    color: var(--purple-700);
    background: var(--purple-100);
}

.float-icon--blue {
    color: var(--blue-700);
    background: var(--blue-100);
}

.proof-strip {
    border-block: 1px solid var(--line);
    background: #fff;
}

.proof-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.proof-strip__grid > div {
    display: grid;
    gap: 1px;
    padding: 22px 30px;
    border-right: 1px solid var(--line);
}

.proof-strip__grid > div:first-child {
    border-left: 1px solid var(--line);
}

.proof-strip strong {
    color: var(--purple-800);
    font-family: "Manrope", sans-serif;
    font-size: 16px;
}

.proof-strip span {
    color: var(--ink-soft);
    font-size: 11px;
}

.section {
    padding-block: 105px;
}

.section--compact {
    padding-block: 70px;
}

.section--soft {
    background: var(--surface-soft);
}

.section-heading {
    margin-bottom: 48px;
}

.section-heading h2 {
    max-width: 720px;
    margin-bottom: 0;
    font-size: clamp(34px, 4vw, 50px);
}

.section-heading--split {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 60px;
}

.section-heading--split > p {
    max-width: 450px;
    margin-bottom: 7px;
    color: var(--ink-soft);
}

.section-heading--center {
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
}

.section-heading--center .eyebrow {
    justify-content: center;
}

.section-heading--compact {
    margin-bottom: 32px;
}

.section-heading--compact h2 {
    font-size: 38px;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.value-card {
    position: relative;
    min-height: 335px;
    overflow: hidden;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 7px;
    background: #fff;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-sm);
}

.value-card--featured {
    color: #fff;
    border-color: transparent;
    background:
        radial-gradient(circle at 90% 0, rgba(72, 173, 245, 0.3), transparent 32%),
        linear-gradient(145deg, var(--purple-950), var(--purple-700));
}

.value-card__number {
    position: absolute;
    top: 24px;
    right: 27px;
    color: #aaa3b8;
    font-size: 11px;
    font-weight: 700;
}

.value-card--featured .value-card__number {
    color: rgba(255, 255, 255, 0.5);
}

.value-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    margin-bottom: 56px;
    border-radius: 16px 16px 16px 5px;
    color: var(--purple-700);
    background: var(--purple-100);
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 800;
}

.value-card--featured .value-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.value-card h3 {
    margin-bottom: 12px;
    font-size: 24px;
}

.value-card p {
    color: var(--ink-soft);
}

.value-card--featured p {
    color: rgba(255, 255, 255, 0.72);
}

.value-card__line {
    position: absolute;
    right: 34px;
    bottom: 24px;
    left: 34px;
    height: 2px;
    background: linear-gradient(90deg, var(--purple-500) 28%, var(--line) 28%);
}

.value-card--featured .value-card__line {
    background: linear-gradient(90deg, #71d8ff 38%, rgba(255,255,255,0.14) 38%);
}

.section--journey {
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 10% 20%, rgba(33, 131, 223, 0.22), transparent 25%),
        linear-gradient(135deg, var(--purple-950), #2b1550 55%, #172b54);
}

.journey-grid {
    display: grid;
    align-items: center;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 95px;
}

.journey-visual {
    position: relative;
    min-height: 495px;
}

.journey-panel {
    position: absolute;
    inset: 30px 30px 45px 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 42px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 40% 18px 30% 8px;
    background:
        linear-gradient(180deg, transparent, rgba(22, 10, 43, 0.82)),
        radial-gradient(circle at 42% 25%, rgba(112, 212, 255, 0.4), transparent 21%),
        linear-gradient(145deg, rgba(124, 74, 217, 0.56), rgba(33, 131, 223, 0.28));
}

.journey-panel__badge {
    position: absolute;
    top: 40px;
    left: 40px;
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 17px 17px 17px 5px;
    background: rgba(255,255,255,0.1);
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.journey-panel p {
    max-width: 400px;
    margin-bottom: 18px;
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.45;
}

.journey-panel > span {
    color: rgba(255, 255, 255, 0.57);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journey-stat {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 15px 15px 15px 5px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
}

.journey-stat strong {
    font-family: "Manrope", sans-serif;
    font-size: 34px;
}

.journey-stat span {
    color: rgba(255,255,255,0.64);
    font-size: 10px;
    line-height: 1.4;
}

.journey-copy h2 {
    max-width: 600px;
    margin-bottom: 21px;
    font-size: clamp(38px, 4.4vw, 58px);
}

.journey-copy > p {
    max-width: 600px;
    margin-bottom: 37px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 17px;
}

.journey-list {
    display: grid;
    gap: 17px;
    margin-bottom: 34px;
}

.journey-list > div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 15px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.journey-list > div > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #a8e2ff;
    background: rgba(112, 212, 255, 0.1);
    font-size: 10px;
    font-weight: 800;
}

.journey-list strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
}

.journey-list p {
    color: rgba(255,255,255,0.57);
    font-size: 13px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--purple-700);
    font-weight: 800;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

.text-link--light {
    color: #a8e2ff;
}

.news-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.news-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 7px;
    background: #fff;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
}

.news-card__visual {
    display: grid;
    height: 160px;
    place-items: center;
    background:
        radial-gradient(circle at 70% 20%, rgba(255,255,255,0.32), transparent 26%),
        linear-gradient(145deg, var(--purple-700), var(--blue-600));
}

.news-card__visual span {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 18px;
    color: #fff;
    background: rgba(255,255,255,0.1);
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 800;
}

.news-card__body {
    padding: 24px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 11px;
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.meta-row span {
    color: var(--purple-700);
}

.news-card h3 {
    margin-bottom: 10px;
    font-size: 19px;
}

.news-card p {
    color: var(--ink-soft);
    font-size: 13px;
}

.event-card,
.calendar-panel {
    align-self: stretch;
    padding: 30px;
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 7px;
    color: #fff;
    background: var(--purple-950);
}

.event-card h3,
.calendar-panel h2 {
    margin: 9px 0 25px;
    font-size: 25px;
}

.event-list {
    display: grid;
}

.event-item {
    display: grid;
    align-items: center;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.event-item time {
    display: grid;
    min-height: 52px;
    place-items: center;
    align-content: center;
    border-radius: 12px 12px 12px 4px;
    color: var(--purple-900);
    background: #fff;
    line-height: 1;
}

.event-item time strong {
    font-family: "Manrope", sans-serif;
    font-size: 17px;
}

.event-item time span {
    margin-top: 4px;
    color: var(--purple-700);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.event-item > div strong,
.event-item > div span {
    display: block;
}

.event-item > div strong {
    margin-bottom: 5px;
    font-size: 13px;
}

.event-item > div span {
    color: rgba(255,255,255,0.56);
    font-size: 10px;
}

.section--cta {
    padding-top: 55px;
}

.cta-panel {
    display: grid;
    align-items: end;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    overflow: hidden;
    padding: 58px;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 9px;
    color: #fff;
    background:
        radial-gradient(circle at 95% 5%, rgba(91, 190, 255, 0.34), transparent 28%),
        linear-gradient(135deg, var(--purple-800), var(--purple-950));
}

.cta-panel h2 {
    max-width: 720px;
    margin-bottom: 0;
    font-size: clamp(34px, 4vw, 50px);
}

.cta-panel__action p {
    margin-bottom: 20px;
    color: rgba(255,255,255,0.67);
}

.site-footer {
    padding: 78px 0 24px;
    color: #fff;
    background: #171020;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.75fr 0.75fr 1fr;
    gap: 55px;
    padding-bottom: 60px;
}

.brand--light {
    color: #fff;
}

.brand--light .brand__copy strong {
    color: #fff;
}

.brand--light .brand__copy small {
    color: #a8e2ff;
}

.footer-brand > p {
    max-width: 330px;
    margin: 22px 0;
    color: rgba(255,255,255,0.58);
    font-size: 13px;
}

.motto-chip {
    display: inline-flex;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 30px;
    color: #b9a7e6;
    background: rgba(255,255,255,0.04);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-heading {
    margin-bottom: 20px;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.footer-links {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links a {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    text-decoration: none;
}

.footer-links a:hover {
    color: #fff;
}

.footer-action p {
    margin-bottom: 20px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    justify-content: space-between;
    align-items: center;
    padding-top: 23px;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.38);
    font-size: 10px;
}

.footer-bottom p {
    margin: 0;
}

.page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 85% 25%, rgba(104, 191, 255, 0.3), transparent 28%),
        linear-gradient(125deg, var(--purple-950), var(--purple-700));
}

.page-hero::after {
    position: absolute;
    right: -100px;
    bottom: -190px;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255,255,255,0.025), 0 0 0 115px rgba(255,255,255,0.018);
    content: "";
}

.page-hero--blue {
    background:
        radial-gradient(circle at 85% 25%, rgba(191, 143, 255, 0.36), transparent 28%),
        linear-gradient(125deg, #123b78, var(--blue-700));
}

.page-hero--admissions {
    background:
        radial-gradient(circle at 90% 25%, rgba(78, 182, 255, 0.36), transparent 28%),
        linear-gradient(125deg, #351260, #6726b7);
}

.page-hero--news {
    background:
        radial-gradient(circle at 88% 20%, rgba(132, 105, 237, 0.36), transparent 28%),
        linear-gradient(125deg, #122a50, #1c68a8);
}

.page-hero--contact {
    background:
        radial-gradient(circle at 85% 20%, rgba(83, 187, 255, 0.3), transparent 30%),
        linear-gradient(125deg, #281046, #4e2088);
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 850px;
    padding-block: 100px 110px;
}

.page-hero h1 {
    max-width: 820px;
    margin-bottom: 22px;
    font-size: clamp(44px, 5vw, 67px);
}

.page-hero p {
    max-width: 690px;
    margin-bottom: 0;
    color: rgba(255,255,255,0.7);
    font-size: 18px;
}

.story-grid,
.curriculum-grid,
.admissions-grid,
.contact-grid {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 90px;
}

.display-sm {
    margin-bottom: 0;
    font-size: clamp(34px, 4vw, 49px);
}

.prose {
    color: var(--ink-soft);
    font-size: 17px;
}

.prose p {
    margin-bottom: 24px;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.mission-card {
    min-height: 390px;
    padding: 50px;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 9px;
    color: #fff;
}

.mission-card--purple {
    background:
        radial-gradient(circle at 90% 10%, rgba(91, 190, 255, 0.35), transparent 29%),
        linear-gradient(145deg, var(--purple-950), var(--purple-700));
}

.mission-card--blue {
    background:
        radial-gradient(circle at 90% 10%, rgba(170, 123, 255, 0.4), transparent 29%),
        linear-gradient(145deg, #103d75, var(--blue-600));
}

.mission-card > span,
.inline-cta span,
.admission-note > div > span,
.student-welcome > div > span {
    display: block;
    margin-bottom: 45px;
    color: rgba(255,255,255,0.66);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mission-card h2 {
    max-width: 510px;
    margin-bottom: 20px;
    font-size: 34px;
}

.mission-card p {
    max-width: 520px;
    color: rgba(255,255,255,0.68);
}

.expect-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block: 1px solid var(--line);
}

.expect-grid article {
    padding: 33px 27px;
    border-right: 1px solid var(--line);
}

.expect-grid article:first-child {
    border-left: 1px solid var(--line);
}

.expect-grid article > span,
.steps-grid article > span {
    color: var(--purple-500);
    font-size: 10px;
    font-weight: 800;
}

.expect-grid h3 {
    margin: 42px 0 12px;
    font-size: 19px;
}

.expect-grid p {
    color: var(--ink-soft);
    font-size: 13px;
}

.inline-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 40px 45px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 7px;
    background: var(--surface-soft);
}

.inline-cta span {
    margin-bottom: 5px;
    color: var(--purple-600);
}

.inline-cta h2 {
    margin-bottom: 0;
    font-size: 26px;
}

.academic-track {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 80px 1fr;
}

.track-card {
    min-height: 430px;
    padding: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 9px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.track-card--dark {
    color: #fff;
    border-color: transparent;
    background:
        radial-gradient(circle at 90% 10%, rgba(67, 171, 255, 0.3), transparent 25%),
        var(--purple-950);
}

.track-card__head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 45px;
}

.track-card__head > span {
    display: grid;
    width: 65px;
    height: 65px;
    place-items: center;
    border-radius: 18px 18px 18px 6px;
    color: var(--purple-700);
    background: var(--purple-100);
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 800;
}

.track-card--dark .track-card__head > span {
    color: #fff;
    background: rgba(255,255,255,0.12);
}

.track-card__head small {
    color: var(--ink-soft);
    font-weight: 700;
}

.track-card--dark .track-card__head small {
    color: rgba(255,255,255,0.54);
}

.track-card h2 {
    margin-bottom: 15px;
    font-size: 34px;
}

.track-card > p {
    color: var(--ink-soft);
}

.track-card--dark > p {
    color: rgba(255,255,255,0.64);
}

.check-list {
    display: grid;
    gap: 12px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 28px;
    font-size: 13px;
}

.check-list li::before {
    position: absolute;
    top: 2px;
    left: 0;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    color: var(--purple-700);
    background: var(--purple-100);
    content: "✓";
    font-size: 9px;
    font-weight: 900;
}

.track-card--dark .check-list li {
    color: rgba(255,255,255,0.8);
}

.track-card--dark .check-list li::before {
    color: #8ee0ff;
    background: rgba(112, 212, 255, 0.12);
}

.track-connector {
    position: relative;
    z-index: 2;
    display: grid;
    width: 80px;
    height: 80px;
    place-items: center;
    margin-inline: auto;
    border: 8px solid #fff;
    border-radius: 50%;
    color: var(--purple-700);
    background: var(--purple-100);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.level-pill {
    display: grid;
    min-height: 150px;
    align-content: space-between;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 15px 15px 15px 5px;
    background: #fff;
}

.level-pill > span {
    color: var(--purple-500);
    font-size: 10px;
    font-weight: 800;
}

.level-pill strong {
    font-family: "Manrope", sans-serif;
    font-size: 19px;
}

.level-pill small {
    color: var(--ink-soft);
    font-size: 9px;
}

.lead-copy {
    max-width: 520px;
    margin-top: 23px;
    color: var(--ink-soft);
    font-size: 17px;
}

.subject-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 7px;
    box-shadow: var(--shadow-sm);
}

.subject-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    color: #fff;
    background: var(--purple-900);
    font-size: 12px;
}

.subject-panel__head strong {
    display: grid;
    width: 33px;
    height: 33px;
    place-items: center;
    border-radius: 9px;
    background: rgba(255,255,255,0.12);
}

.subject-list {
    display: grid;
}

.subject-list > div {
    display: grid;
    align-items: center;
    grid-template-columns: 80px 1fr;
    gap: 15px;
    padding: 20px 25px;
    border-top: 1px solid var(--line);
}

.subject-list > div:first-child {
    border-top: 0;
}

.subject-list span {
    color: var(--purple-600);
    font-size: 10px;
    font-weight: 800;
}

.subject-list strong {
    font-size: 14px;
}

.empty-copy {
    padding: 20px 25px;
    color: var(--ink-soft);
    font-size: 13px;
}

.empty-state {
    display: grid;
    gap: 5px;
    padding: 24px;
    border: 1px dashed #cfc8dc;
    border-radius: 14px;
    color: var(--ink-soft);
    background: var(--surface-soft);
    font-size: 13px;
}

.empty-state strong {
    color: var(--ink);
    font-size: 15px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.steps-grid article {
    min-height: 280px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 7px;
    background: #fff;
    transition: transform 180ms ease, border-color 180ms ease;
}

.steps-grid article:hover {
    border-color: var(--purple-500);
    transform: translateY(-4px);
}

.steps-grid h3 {
    margin: 80px 0 12px;
    font-size: 20px;
}

.steps-grid p {
    color: var(--ink-soft);
    font-size: 13px;
}

.requirement-card {
    padding: 16px 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 7px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.requirement-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.requirement-list li {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 15px;
    padding-block: 22px;
    border-top: 1px solid var(--line);
}

.requirement-list li:first-child {
    border-top: 0;
}

.requirement-list li > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    color: var(--purple-700);
    background: var(--purple-100);
    font-size: 9px;
    font-weight: 800;
}

.requirement-list strong {
    display: block;
    margin-bottom: 4px;
}

.requirement-list p {
    color: var(--ink-soft);
    font-size: 12px;
}

.admission-note {
    display: grid;
    align-items: center;
    grid-template-columns: 70px 1fr auto;
    gap: 28px;
    padding: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 7px;
}

.admission-note__mark {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border-radius: 19px 19px 19px 6px;
    color: #fff;
    background: linear-gradient(145deg, var(--purple-700), var(--blue-600));
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 800;
}

.admission-note > div > span {
    margin-bottom: 4px;
    color: var(--purple-600);
}

.admission-note h2 {
    margin-bottom: 7px;
    font-size: 25px;
}

.admission-note p {
    color: var(--ink-soft);
    font-size: 13px;
}

.content-with-sidebar {
    display: grid;
    align-items: start;
    grid-template-columns: 1fr 350px;
    gap: 55px;
}

.news-list {
    display: grid;
}

.news-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 27px;
    padding: 30px 0;
    border-top: 1px solid var(--line);
}

.news-row:last-child {
    border-bottom: 1px solid var(--line);
}

.news-row__date {
    display: grid;
    min-height: 88px;
    place-items: center;
    align-content: center;
    border-radius: 15px 15px 15px 5px;
    color: #fff;
    background: var(--purple-900);
}

.news-row__date strong {
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    line-height: 1;
}

.news-row__date span {
    margin-top: 5px;
    color: #bdabe7;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.category-chip {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 4px 8px;
    border-radius: 30px;
    color: var(--purple-700);
    background: var(--purple-100);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.news-row h3 {
    margin-bottom: 8px;
    font-size: 23px;
}

.news-row p {
    color: var(--ink-soft);
    font-size: 14px;
}

.calendar-panel {
    position: sticky;
    top: 108px;
}

.calendar-panel .text-link {
    margin-top: 20px;
}

.contact-grid {
    align-items: start;
}

.contact-copy {
    position: sticky;
    top: 125px;
}

.contact-copy > p {
    max-width: 470px;
    margin: 23px 0 35px;
    color: var(--ink-soft);
    font-size: 17px;
}

.contact-reasons {
    display: grid;
    gap: 16px;
}

.contact-reasons > div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
}

.contact-reasons > div > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px 10px 10px 4px;
    color: var(--purple-700);
    background: var(--purple-100);
    font-size: 11px;
    font-weight: 800;
}

.contact-reasons strong {
    display: block;
    font-size: 13px;
}

.contact-reasons p {
    color: var(--ink-soft);
    font-size: 11px;
}

.form-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 7px;
    background: #fff;
    box-shadow: var(--shadow-lg);
}

.form-card__head {
    padding: 27px 32px;
    color: #fff;
    background: var(--purple-950);
}

.form-card__head span {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 800;
}

.form-card__head p {
    color: rgba(255,255,255,0.55);
    font-size: 11px;
}

.contact-form,
.login-form {
    display: grid;
    gap: 19px;
    padding: 32px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.contact-form label,
.login-form label {
    display: grid;
    gap: 7px;
    color: #3c3748;
    font-size: 11px;
    font-weight: 800;
}

.contact-form input,
.contact-form textarea,
.login-form input {
    width: 100%;
    border: 1px solid #dcd8e4;
    border-radius: 10px;
    color: var(--ink);
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.contact-form input,
.login-form input {
    height: 48px;
    padding: 0 14px;
}

.contact-form textarea {
    min-height: 145px;
    padding: 13px 14px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.login-form input:focus {
    border-color: var(--purple-500);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(124, 74, 217, 0.1);
}

.form-honeypot {
    position: absolute;
    left: -10000px;
}

.form-note {
    color: var(--ink-soft);
    font-size: 10px;
    text-align: center;
}

.form-errors {
    margin: 24px 32px 0;
    padding: 14px 17px;
    border: 1px solid #f5b1ab;
    border-radius: 10px;
    color: var(--danger);
    background: #fff6f5;
    font-size: 12px;
}

.form-errors p,
.form-errors ul {
    margin-bottom: 0;
}

.login-section {
    min-height: 720px;
    padding-block: 85px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 20%, rgba(33, 131, 223, 0.25), transparent 24%),
        linear-gradient(130deg, var(--purple-950), #29114d 60%, #143767);
}

.login-grid {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 460px;
    gap: 100px;
}

.login-intro h1 {
    max-width: 610px;
    margin-bottom: 20px;
    font-size: clamp(46px, 5vw, 67px);
}

.login-intro > p {
    max-width: 580px;
    color: rgba(255,255,255,0.65);
    font-size: 17px;
}

.security-note {
    display: flex;
    max-width: 480px;
    gap: 14px;
    margin-top: 37px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.security-note > span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #95e3ff;
    background: rgba(112,212,255,0.1);
    font-weight: 900;
}

.security-note strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

.security-note p {
    color: rgba(255,255,255,0.55);
    font-size: 11px;
}

.login-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 25px 25px 25px 8px;
    color: var(--ink);
    background: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,0.24);
}

.login-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 31px 32px 0;
}

.login-card__head h2 {
    margin-bottom: 2px;
    font-size: 25px;
}

.login-card__head p {
    color: var(--ink-soft);
    font-size: 11px;
}

.login-help {
    padding: 0 32px 28px;
    color: var(--ink-soft);
    font-size: 11px;
    text-align: center;
}

.login-help a {
    color: var(--purple-700);
    font-weight: 700;
}

.dashboard-shell {
    min-height: 700px;
    padding-block: 70px 100px;
    background: var(--surface-soft);
}

.dashboard-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.dashboard-head h1 {
    margin-bottom: 10px;
    font-size: clamp(35px, 4vw, 50px);
}

.dashboard-head p {
    color: var(--ink-soft);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 24px;
}

.metric-card {
    display: grid;
    min-height: 155px;
    align-content: space-between;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 17px 17px 17px 6px;
    background: #fff;
}

.metric-card > span,
.metric-card small {
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.metric-card strong {
    color: var(--purple-800);
    font-family: "Manrope", sans-serif;
    font-size: 39px;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.portal-grid--two {
    grid-template-columns: repeat(2, 1fr);
}

.portal-card {
    min-height: 240px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 17px 17px 17px 6px;
    background: #fff;
}

.portal-card > span {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 30px;
    color: #7b748a;
    background: #eeecf2;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.portal-card--ready > span {
    color: var(--success);
    background: #e2f5ee;
}

.portal-card h2 {
    margin: 52px 0 10px;
    font-size: 22px;
}

.portal-card p {
    color: var(--ink-soft);
    font-size: 13px;
}

.dashboard-panel {
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}

.dashboard-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px;
    color: #fff;
    background: var(--purple-950);
}

.dashboard-panel__head span {
    color: #a8e2ff;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-panel__head h2 {
    margin: 4px 0 0;
    font-size: 23px;
}

.dashboard-panel__head > strong {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 13px;
    background: rgba(255,255,255,0.1);
    font-size: 20px;
}

.assignment-table {
    padding: 10px 30px 22px;
}

.assignment-table__row {
    display: grid;
    grid-template-columns: 0.7fr 1.5fr 0.3fr;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.assignment-table__head {
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.assignment-table small {
    color: var(--purple-600);
    font-weight: 800;
}

.student-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 43px;
    border-radius: var(--radius-md);
    color: #fff;
    background:
        radial-gradient(circle at 90% 20%, rgba(78, 180, 255, 0.32), transparent 23%),
        linear-gradient(135deg, var(--purple-950), var(--purple-700));
}

.student-welcome > div > span {
    margin-bottom: 5px;
}

.student-welcome h2 {
    margin-bottom: 5px;
    font-size: 34px;
}

.student-welcome p {
    color: rgba(255,255,255,0.6);
}

.student-welcome__mark {
    display: grid;
    width: 90px;
    height: 90px;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 26px 26px 26px 8px;
    background: rgba(255,255,255,0.1);
    font-family: "Manrope", sans-serif;
    font-size: 40px;
    font-weight: 800;
}

.error-page {
    display: grid;
    min-height: 630px;
    place-items: center;
    background: var(--purple-50);
}

.error-page__inner {
    max-width: 680px;
    padding-block: 80px;
    text-align: center;
}

.error-page__inner > span {
    display: block;
    margin-bottom: 5px;
    color: var(--purple-500);
    font-family: "Manrope", sans-serif;
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
}

.error-page h1 {
    margin-bottom: 15px;
    font-size: 41px;
}

.error-page p {
    margin-bottom: 25px;
    color: var(--ink-soft);
}

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms ease;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1060px) {
    .site-nav {
        gap: 0;
    }

    .site-nav > a:not(.button) {
        padding-inline: 8px;
        font-size: 13px;
    }

    .hero__grid {
        grid-template-columns: 1fr 400px;
        gap: 36px;
    }

    .hero-card--classes {
        left: 0;
    }

    .hero-card--values {
        right: 0;
    }

    .journey-grid,
    .story-grid,
    .curriculum-grid,
    .admissions-grid,
    .contact-grid {
        gap: 55px;
    }

    .footer-grid {
        grid-template-columns: 1.4fr repeat(2, 0.8fr);
    }

    .footer-action {
        grid-column: 1 / -1;
        max-width: 480px;
    }

    .expect-grid,
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .expect-grid article:nth-child(3) {
        border-left: 1px solid var(--line);
    }

    .level-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .content-with-sidebar {
        gap: 30px;
        grid-template-columns: 1fr 320px;
    }
}

@media (max-width: 860px) {
    .topbar__inner p:first-child {
        display: none;
    }

    .topbar__inner {
        justify-content: center;
    }

    .nav-toggle {
        display: block;
    }

    .nav-toggle[aria-expanded="true"] > span:nth-child(2) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] > span:nth-child(3) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] > span:nth-child(4) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Post-Omega X1-A — left-side drawer, replacing the old dropdown. Same interaction
       language as the Staff mobile sidebar: fixed off-canvas panel, translateX, .is-open. */
    .site-nav {
        position: fixed;
        z-index: 40;
        inset: 0 auto 0 0;
        display: flex;
        flex-direction: column;
        width: min(280px, 85vw);
        height: 100%;
        height: 100dvh;
        overflow-y: auto;
        border-right: 1px solid var(--line);
        background: #fff;
        box-shadow: 20px 0 40px rgba(0, 0, 0, 0.2);
        transform: translateX(var(--mobile-drawer-translate, -105%));
        transition: transform 200ms ease;
    }

    .site-nav.is-open {
        transform: translateX(var(--mobile-drawer-translate, 0));
    }

    .site-nav.is-dragging { transition: none; }
    .site-nav-handle { display: grid; place-items: center; }

    .site-nav > a:not(.button) {
        padding: 17px 24px;
        border-top: 1px solid var(--line);
        font-size: 15px;
    }

    .site-nav > a:not(.button)::after {
        display: none;
    }

    .nav-portal {
        margin: 14px 20px 22px;
    }

    .site-nav-backdrop {
        display: block;
        position: fixed;
        z-index: 39;
        inset: 0;
        background: rgba(20, 10, 35, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
    }

    body.nav-open .site-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.nav-dragging .site-nav-backdrop {
        opacity: calc(var(--mobile-nav-drag-progress, 0) * 1);
        pointer-events: none;
    }

    .hero__grid {
        grid-template-columns: 1fr;
        padding-block: 70px 60px;
    }

    .hero-visual {
        width: min(100%, 560px);
        margin-inline: auto;
    }

    .proof-strip__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .proof-strip__grid > div:first-child,
    .proof-strip__grid > div:nth-child(3) {
        border-left: 1px solid var(--line);
    }

    .proof-strip__grid > div {
        border-bottom: 1px solid var(--line);
    }

    .section-heading--split {
        display: grid;
        gap: 20px;
    }

    .value-grid {
        grid-template-columns: 1fr;
    }

    .value-card {
        min-height: 280px;
    }

    .value-icon {
        margin-bottom: 35px;
    }

    .journey-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .journey-visual {
        width: min(100%, 600px);
        margin-inline: auto;
    }

    .news-layout {
        grid-template-columns: 1fr;
    }

    .cta-panel {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .story-grid,
    .curriculum-grid,
    .admissions-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-copy {
        position: static;
    }

    .mission-grid {
        grid-template-columns: 1fr;
    }

    .academic-track {
        grid-template-columns: 1fr;
    }

    .track-connector {
        margin-block: -10px;
    }

    .admission-note {
        grid-template-columns: 70px 1fr;
    }

    .admission-note .button {
        grid-column: 2;
        justify-self: start;
    }

    .content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .calendar-panel {
        position: static;
    }

    .login-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .login-card {
        width: min(100%, 520px);
    }

    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .site-header__inner {
        min-height: 70px;
    }

    .hero__grid {
        min-height: auto;
        padding-block: 58px 40px;
    }

    .hero h1 {
        font-size: 43px;
    }

    .hero__copy > p {
        font-size: 16px;
    }

    .hero__actions .button {
        width: 100%;
    }

    .hero-visual {
        min-height: 470px;
    }

    .hero-card--main {
        top: 48px;
        right: 0;
        width: 94%;
    }

    .hero-card--classes {
        left: 0;
    }

    .hero-card--values {
        right: 0;
        bottom: 15px;
    }

    .hero-card--float {
        min-width: 195px;
    }

    .hero-card__content {
        padding: 30px 26px 32px;
    }

    .hero-card__content h2 {
        font-size: 30px;
    }

    .proof-strip__grid {
        grid-template-columns: 1fr 1fr;
    }

    .proof-strip__grid > div {
        padding: 17px 14px;
    }

    .section {
        padding-block: 75px;
    }

    .section--compact {
        padding-block: 48px;
    }

    .section-heading {
        margin-bottom: 34px;
    }

    .section-heading h2 {
        font-size: 34px;
    }

    .value-card {
        padding: 28px;
    }

    .journey-visual {
        min-height: 440px;
    }

    .journey-panel {
        inset: 0 12px 40px 0;
        padding: 27px;
        border-radius: 31% 18px 27% 7px;
    }

    .journey-panel p {
        font-size: 17px;
    }

    .journey-panel__badge {
        top: 28px;
        left: 28px;
    }

    .journey-copy h2 {
        font-size: 38px;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .cta-panel {
        padding: 37px 28px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 20px;
    }

    .footer-brand,
    .footer-action {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        display: grid;
        gap: 5px;
    }

    .page-hero__inner {
        padding-block: 75px 82px;
    }

    .page-hero h1 {
        font-size: 42px;
    }

    .page-hero p {
        font-size: 16px;
    }

    .mission-card {
        min-height: 350px;
        padding: 36px 28px;
    }

    .mission-card h2 {
        font-size: 29px;
    }

    .expect-grid,
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .expect-grid article,
    .expect-grid article:nth-child(3) {
        border-left: 1px solid var(--line);
    }

    .inline-cta {
        display: grid;
        padding: 30px 24px;
    }

    .track-card {
        min-height: auto;
        padding: 33px 26px;
    }

    .track-card__head {
        margin-bottom: 32px;
    }

    .level-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .level-pill {
        min-height: 130px;
        padding: 16px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .admission-note {
        grid-template-columns: 1fr;
        padding: 30px 24px;
    }

    .admission-note .button {
        grid-column: auto;
        width: 100%;
    }

    .news-row {
        grid-template-columns: 70px 1fr;
        gap: 18px;
    }

    .news-row__date {
        min-height: 74px;
    }

    .contact-form,
    .login-form {
        padding: 25px 22px;
    }

    .form-card__head {
        padding-inline: 22px;
    }

    .form-errors {
        margin-inline: 22px;
    }

    .login-section {
        padding-block: 60px;
    }

    .login-intro h1 {
        font-size: 42px;
    }

    .login-card__head {
        padding-inline: 22px;
    }

    .login-help {
        padding-inline: 22px;
    }

    .dashboard-head {
        display: grid;
        align-items: start;
    }

    .metric-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .metric-card {
        min-height: 135px;
        padding: 20px;
    }

    .student-welcome {
        padding: 30px 24px;
    }

    .student-welcome__mark {
        display: none;
    }

    .assignment-table {
        padding-inline: 18px;
        overflow-x: auto;
    }

    .assignment-table__row {
        min-width: 500px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    /* Part C — keep the interaction feedback, drop the movement: buttons and
       cards still change colour / border / shadow on hover, focus and press,
       but no translate. */
    .button:hover,
    .button:active,
    .staff-portal a.staff-card:hover,
    .staff-portal .staff-card--module:hover,
    .staff-portal .staff-metric--link:hover,
    .staff-portal .staff-main button:active,
    .staff-portal .staff-filters button:active,
    .staff-portal .staff-inline-form button:active{
        transform: none;
    }
}

@media print {
    .topbar,
    .site-header,
    .site-footer,
    .button,
    .nav-toggle {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .section,
    .page-hero__inner {
        padding-block: 30px;
    }
}

/* Staff portal foundation */
.staff-portal{background:#f6f5fa}

.dev-credit{margin:0;color:#756f82;font-size:11px}.dev-credit a{color:var(--purple-700);font-weight:700;text-decoration:none}.dev-credit a:hover,.dev-credit a:focus-visible{text-decoration:underline}.site-footer .dev-credit{color:rgba(255,255,255,.5)}.site-footer .dev-credit a{color:#c6b6ec}.staff-count{display:grid;place-items:center;color:#fff;background:#6a1b9a;font-weight:800}.staff-main{width:min(100% - 56px,1220px);margin:0 auto;padding:42px 0 64px}.staff-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:28px}.staff-page-head h1{margin:3px 0 8px;font-size:clamp(30px,4vw,45px)}.staff-page-head>div>p:last-child,.staff-card p,.staff-empty-state p{color:#706a7b;font-size:13px}.staff-eyebrow{margin:0;color:#6a1b9a;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.academic-context{display:grid;min-width:200px;padding:17px 18px;border:1px solid #e4e0eb;border-radius:13px;background:#fff}.academic-context span,.staff-metric span,.staff-metric small{color:#756f82;font-size:9px;font-weight:800;text-transform:uppercase}.academic-context strong{margin-top:6px;color:#3b176d;font-size:15px}.academic-context small{color:#1767b0;font-weight:700}.academic-context--empty strong,.academic-context--empty small{color:#706a7b}.staff-flash,.staff-alert{display:flex;gap:10px;margin:0 34px;padding:13px 17px;border-radius:0 0 10px 10px;font-size:13px}.staff-flash--success{color:#126b4a;background:#e3f6ed}.staff-flash--error,.staff-alert{color:#a23b35;background:#fff0ee}.staff-alert{display:grid;margin:0 0 24px;border:1px solid #f3c3bf}.staff-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}.staff-metric,.staff-card,.staff-table-card{border:1px solid #e4e0eb;border-radius:14px;background:#fff;box-shadow:0 6px 20px #29144c09}.staff-metric{display:grid;min-height:92px;align-content:space-between;padding:12px 14px}.staff-metric strong{color:#4c167a;font-family:Manrope,sans-serif;font-size:22px}.staff-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.staff-card-grid--two{grid-template-columns:repeat(2,1fr);margin-top:18px}.staff-card{min-height:220px;padding:25px}.staff-card h2{margin:45px 0 9px;font-size:21px}.staff-badge{display:inline-flex;padding:5px 8px;border-radius:20px;color:#706a7b;background:#efedf3;font-size:9px;font-weight:800;text-transform:uppercase}.staff-badge--ready{color:#13734f;background:#e2f5ec}.staff-badge--blue{color:#1767b0;background:#e8f3ff}.staff-table-card{overflow:hidden}.staff-card-head{display:flex;align-items:center;justify-content:space-between;padding:23px 26px;border-bottom:1px solid #e4e0eb}.staff-card-head h2{margin:4px 0 0;font-size:22px}.staff-count{width:39px;height:39px;border-radius:10px}.staff-count--text{width:auto;height:auto;min-width:39px;border-radius:999px;padding:6px 14px;white-space:nowrap}.staff-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.staff-chip{padding:5px 12px;border:1px solid #ddd5e7;border-radius:999px;color:#6a1b9a;background:#f6f1fb;font-size:11px;font-weight:700;text-decoration:none}.staff-chip--active{color:#fff;background:#6a1b9a;border-color:#6a1b9a}.staff-table-wrap{overflow-x:auto}.staff-table{width:100%;border-collapse:collapse;min-width:520px}.staff-table th,.staff-table td{padding:16px 26px;border-bottom:1px solid #eeeaf3;text-align:left;font-size:13px}.staff-table thead th{color:#756f82;background:#faf9fc;font-size:10px;text-transform:uppercase}.staff-table-row--clickable{cursor:pointer}.staff-table-row--clickable:hover{background:#faf7fd}.staff-table-row--clickable:focus-visible{outline:2px solid #6a1b9a;outline-offset:-2px}.staff-empty-state{padding:48px 26px;text-align:center}.staff-empty-state strong{display:block;font-size:16px}@media(max-width:900px){.staff-main{width:min(100% - 36px,1220px)}.staff-metrics{grid-template-columns:repeat(2,1fr)}.staff-card-grid{grid-template-columns:1fr}}@media(max-width:600px){.staff-page-head{display:grid;align-items:start}.academic-context{width:100%}.staff-main{padding-top:28px}.staff-metrics{gap:8px;grid-template-columns:repeat(2,1fr)}.staff-metric{min-height:80px;padding:10px 12px}.staff-metric strong{font-size:18px}.staff-card-head{padding:19px}.staff-table th,.staff-table td{padding:14px 18px}.staff-flash{margin:0 18px}}
/* Smallest phones: keep logo + full institution name (priority 1 & 2) — let the name wrap
   rather than truncate, and drop the secondary context line before hiding any identity. */

.staff-subnav,.staff-pagination{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.staff-subnav a,.staff-pagination a{padding:9px 12px;border:1px solid #ddd5e7;border-radius:9px;color:#4c167a;background:#fff;font-size:12px;font-weight:800;text-decoration:none}.staff-subnav a[aria-current=page],.staff-pagination a[aria-current=page]{color:#fff;background:#4c167a}.staff-form{display:grid;gap:18px;padding:26px}.staff-form label{display:grid;gap:7px;color:#3c3748;font-size:12px;font-weight:800}.staff-form input,.staff-form select,.staff-filters input,.staff-filters select{min-height:44px;padding:0 12px;border:1px solid #dcd8e4;border-radius:9px;background:#fff}.staff-form-actions,.staff-filters{display:flex;align-items:end;flex-wrap:wrap;gap:10px}.staff-inline-form{display:inline}.staff-inline-form button,.staff-filters button{border:0;color:#5b21b6;background:transparent;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.staff-pagination{padding:18px 24px;margin:0;border-top:1px solid #eeeaf3}
.staff-class-filter{display:flex;flex-wrap:wrap;gap:8px}.staff-class-filter label{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid #ddd5e7;border-radius:9px;background:#fff;color:#4c167a;font-size:12px;font-weight:800;cursor:pointer}.staff-class-filter label:has(input:checked){color:#fff;background:#4c167a;border-color:#4c167a}.staff-class-filter input{margin:0}

/* Students tab — class filter tabs and the per-student inherited-subject disclosure.
   The tabs are real links (shareable, keyboard- and no-JS-friendly) styled as the same pill
   family as .staff-subnav, with the active tab carried by aria-current so the visual state and
   the accessible state can never disagree. */
.staff-class-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:18px 24px 0}.staff-class-tab{padding:9px 12px;border:1px solid #ddd5e7;border-radius:9px;color:#4c167a;background:#fff;font-size:12px;font-weight:800;text-decoration:none}.staff-class-tab:hover{border-color:#6a1b9a}.staff-class-tab:focus-visible{outline:3px solid #6a1b9a18;border-color:#6a1b9a}.staff-class-tab[aria-current=page]{color:#fff;background:#4c167a;border-color:#4c167a}
.people-student-subjects{white-space:nowrap}.staff-subject-toggle{padding:5px 10px;border:1px solid #ddd5e7;border-radius:8px;background:#fff;color:#4c167a;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.staff-subject-toggle:hover{border-color:#6a1b9a}.staff-subject-toggle:focus-visible{outline:3px solid #6a1b9a18;border-color:#6a1b9a}.people-student-subject-list{display:grid;gap:4px;padding:8px 0 0;margin:0;list-style:none;white-space:normal}.people-student-subject-list li{color:#3c3748;font-size:11px;font-weight:500}.people-student-subject-list[hidden]{display:none}

.staff-relationship-filters{margin-bottom:18px}.staff-form--inline{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end}@media(max-width:900px){.staff-form--inline{grid-template-columns:1fr 1fr}}@media(max-width:600px){.staff-form--inline{grid-template-columns:1fr}}
.staff-form textarea{width:100%;padding:12px;border:1px solid #dcd8e4;border-radius:9px;background:#fff;resize:vertical;font:inherit}.staff-form input:focus,.staff-form select:focus,.staff-form textarea:focus{border-color:#6a1b9a;outline:3px solid #6a1b9a18}.staff-form label small,.staff-table-note{display:block;margin-top:4px;color:#756f82;font-size:10px;font-weight:500}.staff-table-note--warn{color:#b4530a;font-weight:700}.staff-detail-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:26px;margin:0}.staff-detail-list div,.staff-message{padding:18px;border:1px solid #eeeaf3;border-radius:10px;background:#faf9fc}.staff-detail-list dt{color:#756f82;font-size:10px;font-weight:800;text-transform:uppercase}.staff-detail-list dd{margin:6px 0 0;overflow-wrap:anywhere;font-size:13px}.staff-message{margin:0 26px}.staff-message h3{margin-top:0}.staff-message p{margin-bottom:0;white-space:normal;overflow-wrap:anywhere}.staff-form--status{grid-template-columns:minmax(180px,320px) auto;align-items:end}@media(max-width:800px){.staff-detail-list{grid-template-columns:1fr 1fr}.staff-form--status{grid-template-columns:1fr}}@media(max-width:500px){.staff-detail-list{grid-template-columns:1fr}}
.staff-list-line{display:block}.staff-list-line+.staff-list-line{margin-top:4px}.teacher-entry-card,.teacher-profile-metrics{margin-top:18px}.teacher-profile-metrics{grid-template-columns:repeat(3,1fr)}@media(max-width:900px){.teacher-profile-metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.teacher-profile-metrics{grid-template-columns:1fr}}
.attendance-register-head{gap:18px}.attendance-register-actions{padding:20px 26px}.attendance-register-actions span{color:#706a7b;font-size:11px}.staff-table select{min-height:36px;padding:0 8px;border:1px solid #dcd8e4;border-radius:8px;background:#fff}.teacher-week{display:grid;gap:18px}.teacher-day{overflow:hidden}@media(max-width:700px){.attendance-register-head{align-items:flex-start;flex-direction:column}.attendance-register-head .staff-filters{width:100%}.attendance-register-actions{align-items:flex-start;flex-direction:column}}
.assignment-detail-actions{padding:20px 26px}
.result-status-reason{margin:20px 26px;padding:16px;border-left:4px solid #6a1b9a;background:#f7f3fb}.result-status-reason p{margin:5px 0 0}.result-submit-form{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:20px 26px;border-top:1px solid #eeeaf3}.result-submit-form span{color:#706a7b;font-size:11px}.result-review-actions{display:grid;gap:12px;padding:22px 26px;border-top:1px solid #eeeaf3}.result-review-actions .staff-form{padding:0}.result-history{margin-top:18px}
.result-entry-head{gap:18px}.result-score-limits{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.result-score-limits span{padding:8px 10px;border-radius:8px;color:#706a7b;background:#f4f1f8;font-size:11px}.result-score-limits strong{color:#3b176d}.result-entry-table{min-width:820px}.result-entry-table input{width:86px;min-height:38px;padding:0 9px;border:1px solid #dcd8e4;border-radius:8px;font:inherit}.result-entry-table input:focus{border-color:#6a1b9a;outline:3px solid #6a1b9a18}.result-unentered{color:#756f82;font-size:10px}@media(max-width:700px){.result-entry-head{align-items:flex-start;flex-direction:column}.result-score-limits{justify-content:flex-start}}

.report-card-preview{max-width:900px;margin:0 auto;border:1px solid #dcd8e4;border-radius:14px;background:#fff;box-shadow:0 8px 30px #29144c12;overflow:hidden}
.report-card-heading{padding:34px 38px 28px;border-bottom:4px solid #6a1b9a;text-align:center}.report-card-heading h1{margin:5px 0 4px;font-size:clamp(28px,4vw,40px)}.report-card-heading p:last-child{margin:0;color:#706a7b}
.report-card-identity{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;border-bottom:1px solid #e4e0eb}.report-card-identity div{padding:18px;border-right:1px solid #eeeaf3}.report-card-identity div:last-child{border-right:0}.report-card-identity dt{color:#756f82;font-size:9px;font-weight:800;text-transform:uppercase}.report-card-identity dd{margin:6px 0 0;font-size:12px;font-weight:800;overflow-wrap:anywhere}
.report-card-results h2,.report-card-conduct h2{margin:0;padding:23px 26px;border-bottom:1px solid #e4e0eb;font-size:21px}.report-card-results .staff-table th,.report-card-results .staff-table td,.report-card-conduct .staff-table th,.report-card-conduct .staff-table td{padding-block:14px}.report-card-note{padding:18px 26px;color:#706a7b;background:#faf9fc;font-size:10px}.report-card-note p{margin:0}
.report-card-class-grid{display:flex;flex-wrap:wrap;gap:12px;padding:20px}
@media(max-width:760px){.report-card-identity{grid-template-columns:1fr 1fr}.report-card-identity div{border-bottom:1px solid #eeeaf3}.report-card-identity div:last-child{grid-column:1/-1}.report-card-heading{padding-inline:22px}}
@media print{.staff-flash,.report-card-controls{display:none!important}.staff-main{width:100%;padding:0}.report-card-preview{max-width:none;border:0;border-radius:0;box-shadow:none}.report-card-heading{padding-top:0}.report-card-results .staff-table-wrap{overflow:visible}.report-card-results .staff-table{min-width:0}.report-card-results tr{break-inside:avoid}.report-card-note{background:#fff}}

.student-page-head{align-items:center}.student-page-head h1{max-width:760px}.student-metrics{grid-template-columns:repeat(3,1fr)}.student-metric--class strong{font-size:24px;line-height:1.2;overflow-wrap:anywhere}.student-dashboard-grid{margin-top:0}.student-summary-card{min-height:245px}.student-summary-card h2{margin-top:34px}.student-summary-card>a{display:inline-block;margin:10px 12px 0 0;color:#5b21b6;font-size:12px;font-weight:800}.student-profile-list{grid-template-columns:repeat(3,minmax(0,1fr))}.student-readonly-note{margin:0;padding:18px 26px;border-top:1px solid #eeeaf3;color:#706a7b;background:#faf9fc;font-size:11px}
.student-assignment-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.student-assignment-card{padding:24px;border:1px solid #e4e0eb;border-radius:14px;background:#fff;box-shadow:0 6px 20px #29144c09}.student-assignment-card>div{display:flex;flex-wrap:wrap;gap:7px}.student-assignment-card h2{margin:18px 0 7px;font-size:20px}.student-assignment-card h2 a,.student-assignment-card>a{color:#4c167a;text-decoration:none}.student-assignment-card h2 a:hover,.student-assignment-card>a:hover{text-decoration:underline}.student-assignment-card p{color:#706a7b;font-size:12px}.student-assignment-card .student-assignment-meta{color:#1767b0;font-weight:800}.student-assignment-card dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.student-assignment-card dt{color:#756f82;font-size:9px;font-weight:800;text-transform:uppercase}.student-assignment-card dd{margin:4px 0 0;font-size:11px}.student-assignment-card>a{font-size:12px;font-weight:800}.student-badge--past{color:#9b4038;background:#fff0ee}.student-assignment-detail .staff-message{margin-bottom:24px}.student-week{margin-top:0}
@media(max-width:850px){.student-profile-list{grid-template-columns:1fr 1fr}.student-assignment-list{grid-template-columns:1fr}}@media(max-width:700px){.student-metrics{grid-template-columns:1fr}.student-profile-list{grid-template-columns:1fr}.student-assignment-card{padding:19px}.student-assignment-card dl{grid-template-columns:1fr}.student-page-head{align-items:start}}
.student-record-filters{grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto}.student-results .staff-card-head p{margin:5px 0 0;color:#706a7b;font-size:12px}.student-results .staff-table,.student-report-list .staff-table{min-width:680px}.student-record-actions{display:flex;flex-wrap:wrap;gap:10px}.student-record-actions a{font-weight:800;text-decoration:none}.student-record-actions a:hover{text-decoration:underline}.student-report-list .staff-empty-state{min-height:220px}
@media(max-width:700px){.student-record-filters{grid-template-columns:1fr}.student-record-actions{min-width:150px}.student-portal .report-card-preview{border-radius:10px}.student-portal .report-card-heading{padding-inline:20px}}

/* CBT authoring */
.cbt-author-form fieldset{display:grid;gap:10px;margin:0;padding:18px;border:1px solid #e4e0eb;border-radius:10px}.cbt-author-form legend{padding:0 6px;color:#3c3748;font-size:12px;font-weight:800}.cbt-author-form fieldset>p{margin:0 0 4px;color:#706a7b;font-size:11px}.cbt-option-row{grid-template-columns:auto auto minmax(0,1fr);align-items:center}.cbt-option-row>input[type=radio]{min-height:auto}.cbt-option-letter{font-weight:800;color:#6a1b9a}.cbt-inline-radio{display:flex;align-items:center;gap:8px;font-size:12px}.cbt-inline-radio input{width:16px;height:16px;min-height:auto}.cbt-inline-radio span{color:#706a7b;font-weight:400}
.cbt-passage-fieldset [data-passage-panel][hidden],.cbt-type-fieldset [data-cbt-type-panel][hidden]{display:none}
.cbt-materials-panel{margin-top:16px}.cbt-material-list{display:grid;gap:14px;margin:0 0 16px;padding:0;list-style:none}.cbt-material-list>li{padding:14px;border:1px solid #e4e0eb;border-radius:10px}.cbt-material-thumb,.cbt-material-staged img,.student-cbt-material-image{display:block;max-width:100%;height:auto;margin:8px 0;border:1px solid #e4e0eb;border-radius:8px}.cbt-material-thumb{max-height:180px;width:auto}.student-cbt-material-image{max-height:360px}
.cbt-material-table-wrap{overflow-x:auto;margin:8px 0}.cbt-material-table{border-collapse:collapse;font-size:12px}.cbt-material-table th,.cbt-material-table td{border:1px solid #d9d4e2;padding:5px 9px;text-align:left}.cbt-material-table th{background:#f6f3fb;font-weight:800}
.cbt-table-editor-grid{border-collapse:collapse;margin:8px 0}.cbt-table-editor-grid td{border:1px solid #d9d4e2;padding:2px}.cbt-table-editor-grid input{width:110px;min-height:34px;border:0;padding:4px 6px}.cbt-table-editor-controls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.cbt-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.cbt-checkbox{grid-template-columns:auto 1fr!important;align-items:center;justify-content:start}.cbt-checkbox input{min-height:auto;width:18px;height:18px}.cbt-readiness{margin-top:18px;padding:24px 26px}.cbt-readiness h2{margin:5px 0 12px}.cbt-readiness ul{margin:0;padding-left:20px;color:#a23b35;font-size:12px}.cbt-builder-list{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:cbt-question}.cbt-builder-list>li{counter-increment:cbt-question;border-bottom:1px solid #eeeaf3}.cbt-builder-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:24px 26px}.cbt-builder-question h3{margin:12px 0;font-size:16px}.cbt-builder-question h3:before{content:counter(cbt-question) '. ';color:#6a1b9a}.cbt-builder-question ol{display:grid;gap:7px;margin:0;padding-left:24px;color:#706a7b;font-size:12px}.cbt-correct-option{color:#13734f;font-weight:800}.cbt-builder-actions{display:flex;align-items:start;gap:7px}.cbt-builder-actions button,.cbt-eligible-list button{border:1px solid #ddd5e7;border-radius:8px;padding:7px 9px;color:#5b21b6;background:#fff;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.cbt-eligible-list{display:grid}.cbt-eligible-list article{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 26px;border-top:1px solid #eeeaf3}.cbt-eligible-list p{margin:8px 0 0;font-size:12px}.cbt-eligible-list .button{min-width:70px}.cbt-eligible-list+.staff-empty-state{border-top:1px solid #eeeaf3}
@media(max-width:700px){.cbt-form-grid{grid-template-columns:1fr}.cbt-builder-list article{grid-template-columns:1fr;padding:20px}.cbt-builder-actions{flex-wrap:wrap}.cbt-eligible-list article{align-items:flex-start;padding:16px 20px}.cbt-author-form fieldset{padding:14px}}
/* Student CBT runtime */
.student-cbt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.student-cbt-card{padding:24px;border:1px solid #e4e0eb;border-radius:14px;background:#fff;box-shadow:0 6px 20px #29144c09}.student-cbt-card__top{display:flex;flex-wrap:wrap;gap:7px}.student-cbt-card h2{margin:18px 0 5px;font-size:21px}.student-cbt-card>p{margin:0;color:#706a7b;font-size:12px}.student-cbt-card dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.student-cbt-card dt{color:#756f82;font-size:9px;font-weight:800;text-transform:uppercase}.student-cbt-card dd{margin:4px 0 0;font-size:11px}.student-cbt-detail .staff-message{margin-bottom:20px}.student-cbt-start{display:flex;align-items:center;padding:22px 26px}.student-cbt-start strong{color:#706a7b;font-size:12px}.student-cbt-runtime{overflow:hidden;border:1px solid #e4e0eb;border-radius:14px;background:#fff;box-shadow:0 8px 28px #29144c10}.student-cbt-runtime__header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;border-bottom:1px solid #e4e0eb}.student-cbt-runtime__header h2{margin:5px 0 8px}.student-cbt-runtime__header p:last-child{margin:0;color:#706a7b;font-size:11px}.student-cbt-runtime [data-cbt-retry]{margin-left:5px;border:0;color:#5b21b6;background:transparent;font:inherit;font-weight:800;cursor:pointer}.student-cbt-timer{display:grid;min-width:170px;padding:14px 18px;border-radius:11px;color:#fff;background:#3b176d;text-align:center}.student-cbt-timer span,.student-cbt-timer small{font-size:9px;font-weight:800;text-transform:uppercase}.student-cbt-timer strong{margin:3px 0;font-family:Manrope,sans-serif;font-size:28px}.student-cbt-question-nav{display:flex;gap:8px;overflow-x:auto;padding:14px 26px;border-bottom:1px solid #eeeaf3;background:#faf9fc}.student-cbt-question-nav a{display:grid;flex:0 0 38px;height:38px;place-items:center;border:1px solid #dcd8e4;border-radius:9px;color:#4c167a;background:#fff;font-size:11px;font-weight:800;text-decoration:none}.student-cbt-question-nav a.is-answered{border-color:#78caaa;color:#126b4a;background:#e3f6ed}.student-cbt-questions{display:grid;gap:18px;padding:26px}.student-cbt-question{scroll-margin-top:20px;margin:0;padding:22px;border:1px solid #e4e0eb;border-radius:12px}.student-cbt-question legend{max-width:100%;padding:0 8px;font-size:15px;font-weight:800}.student-cbt-question legend span{display:block;margin-bottom:6px;color:#6a1b9a;font-size:9px;text-transform:uppercase}.student-cbt-options{display:grid;gap:10px;margin-top:10px}.student-cbt-options label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px solid #e4e0eb;border-radius:10px;cursor:pointer}.student-cbt-options label:has(input:checked){border-color:#6a1b9a;background:#f7f3fb}.student-cbt-options input{width:19px;height:19px}.student-cbt-options span{font-size:13px}.student-cbt-submit{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 26px;border-top:1px solid #e4e0eb;background:#faf9fc}.student-cbt-submit p{margin:0;color:#706a7b;font-size:11px}.student-cbt-final .student-readonly-note{margin-top:0}
/* Omega Phase L — one active question at a time + passage / shared material. Progressive:
   without .is-enhanced every .student-cbt-stage is shown (no-JS fallback). */
.student-cbt-question-nav a.is-current{border-color:#6a1b9a;color:#fff;background:#6a1b9a}
.student-cbt-stage{display:grid;gap:16px}
.student-cbt-stage[hidden]{display:none}
.student-cbt-runtime.is-enhanced .student-cbt-stage--grouped{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
.student-cbt-passage{align-self:stretch}
.student-cbt-passage__inner{position:sticky;top:16px;max-height:70vh;overflow:auto;padding:18px 20px;border:1px solid #e4e0eb;border-left:4px solid #8250df;border-radius:12px;background:#faf7fe}
.student-cbt-passage__body{white-space:pre-wrap;font-size:13px;line-height:1.6}
.student-cbt-passage__toggle{margin-bottom:8px}
.student-cbt-option-letter{font-weight:800;color:#6a1b9a}
.student-cbt-pager{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 26px;border-top:1px solid #eeeaf3;background:#faf9fc}
.student-cbt-pager span{font-size:12px;font-weight:800;color:#4c167a}
.student-cbt-pager .button[disabled]{opacity:.45;pointer-events:none}
@media(max-width:760px){.student-cbt-runtime.is-enhanced .student-cbt-stage--grouped{grid-template-columns:1fr}.student-cbt-passage__inner{position:static;max-height:none}}
@media(max-width:760px){.student-cbt-list{grid-template-columns:1fr}.student-cbt-runtime__header{align-items:stretch;flex-direction:column}.student-cbt-timer{width:100%}.student-cbt-questions{padding:18px}.student-cbt-question{padding:17px}.student-cbt-submit{align-items:stretch;flex-direction:column}.student-cbt-submit .button{width:100%}.student-cbt-card{padding:20px}}@media(max-width:480px){.student-cbt-card dl{grid-template-columns:1fr}.student-cbt-question-nav{padding-inline:18px}.student-cbt-options label{min-height:58px}.student-cbt-runtime__header{padding:20px}}
/* CBT grading and results */
.cbt-integration-notice{margin:0 0 18px}.cbt-result-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));align-items:end}.cbt-results-table{min-width:980px}.cbt-result-score{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 26px 26px}.cbt-result-score>div{display:grid;gap:7px;padding:22px;border:1px solid #e4e0eb;border-radius:12px;background:#faf9fc}.cbt-result-score span{color:#756f82;font-size:9px;font-weight:800;text-transform:uppercase}.cbt-result-score strong{color:#4c167a;font-family:Manrope,sans-serif;font-size:28px}.student-readonly-note a{color:#5b21b6;font-weight:800}@media(max-width:900px){.cbt-result-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.cbt-result-filters,.cbt-result-score{grid-template-columns:1fr}}

/* Stage 13A settings and configurable school logo */
/* Prime Peculiar College identity logo surface — see schoolIdentityMark(). The official
   full logo ships on a white background, so it always sits on its own clean light surface:
   contained (object-fit), aspect-ratio preserved, never cropped or stretched, a subtle
   purple-tinted hairline and a controlled radius. Only the size varies by context. */
.brand__logo{display:grid;flex:0 0 48px;width:48px;height:48px;place-items:center;box-sizing:border-box;padding:5px;overflow:hidden;border:1px solid var(--panel-border);border-radius:12px;background:#fff}.brand__logo img{display:block;width:100%;height:100%;object-fit:contain}.brand__logo--auth{flex-basis:64px;width:64px;height:64px;padding:8px;border-radius:15px}.brand__logo--compact{flex-basis:34px;width:34px;height:34px;padding:3px;border-radius:9px}.brand__logo--topbar{flex-basis:38px;width:38px;height:38px;padding:3px;border-radius:9px}@media(max-width:600px){.brand__logo--auth{flex-basis:52px;width:52px;height:52px}}.brand__copy{min-width:0}.brand__copy strong{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand__copy small{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settings-subnav{position:sticky;z-index:2;top:8px}.settings-section{margin-bottom:20px;scroll-margin-top:80px}.settings-form+.settings-form{border-top:1px solid #eeeaf3}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.settings-logo-preview{display:block;width:64px;height:64px;object-fit:contain;border:1px solid #e4e0eb;border-radius:12px;background:#fff}.settings-result-form .staff-form-actions span{color:#706a7b;font-size:11px}
.grade-band-editor{margin:0;padding:0;border:0}.grade-band-editor legend{font-weight:800;font-size:13px}.grade-band-table input{width:100%}.grade-band-table td:last-child{width:1%;white-space:nowrap}.grade-band-advanced{margin:10px 0}.grade-band-advanced summary{cursor:pointer;color:#5b21b6;font-size:11px;font-weight:800}.grade-band-hint{margin:8px 0 0;color:#b3261e;font-size:11px}
.settings-boundary{margin:0}.settings-boundary p{line-height:1.6}@media(max-width:700px){.settings-grid{grid-template-columns:1fr}.settings-subnav{position:static}.brand__copy strong{max-width:170px}.brand__copy small{max-width:180px}}

.notification-page-head form{flex:0 0 auto}.notification-list{display:grid;gap:12px}.notification-item{padding:22px 24px;border:1px solid #e4e0eb;border-radius:14px;background:#fff;box-shadow:0 6px 20px #29144c09}.notification-item--unread{border-left:4px solid #1e88e5;background:#f8fbff}.notification-item>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.notification-item time,.notification-detail time{color:#756f82;font-size:11px}.notification-item h2{margin:14px 0 7px;font-size:19px}.notification-item h2 a{color:#3b176d;text-decoration:none}.notification-item h2 a:hover,.notification-item h2 a:focus-visible{text-decoration:underline}.notification-item p,.notification-detail__body>p{color:#5f5969;font-size:13px;line-height:1.65}.notification-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:18px}.notification-actions form{display:inline-flex}.notification-actions>a,.notification-actions form:not(:has(.button)) button{border:0;padding:0;color:#5b21b6;background:transparent;font:inherit;font-size:12px;font-weight:800;text-decoration:none;cursor:pointer}.notification-detail__body{padding:26px}.notification-detail__body>p{margin:0 0 16px;font-size:15px}.notification-list+.staff-pagination{margin-top:18px;border:1px solid #eeeaf3;border-radius:12px;background:#fff}@media(max-width:600px){.notification-page-head form{width:100%}.notification-page-head form .button{width:100%}.notification-item{padding:19px}.notification-item>div:first-child{align-items:flex-start}.notification-detail__body{padding:20px}.notification-actions{align-items:stretch}.notification-actions form:has(.button){width:100%}.notification-actions .button{width:100%}}
/* Stage 5B.6 — canonical avatar badge + dashboard module cards */
.avatar-badge{display:grid;place-items:center;flex-shrink:0;width:33px;height:33px;border-radius:50%;overflow:hidden;color:#fff;background:#6a1b9a;font-weight:800;font-size:12px;line-height:1}
.avatar-badge--photo{background:#efedf3}
.avatar-badge img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-badge--identity{width:60px;height:60px;font-size:20px}

.staff-page-head__identity{display:flex;align-items:center;gap:16px}
.staff-card-grid--modules{grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}
.staff-card--module{display:flex;flex-direction:column;gap:7px;min-height:0;padding:20px 22px;color:inherit;text-decoration:none;transition:box-shadow .15s ease,transform .15s ease}
.staff-card--module h2{margin:0;font-size:17px}
.staff-card--module p{margin:0}
.staff-card--module:hover,.staff-card--module:focus-visible{outline:0;transform:translateY(-2px);box-shadow:0 10px 26px #29144c1f}
@media(max-width:600px){.staff-page-head__identity{gap:12px}.avatar-badge--identity{width:48px;height:48px;font-size:16px}}

/* Stage 5B.6C — Change password link in the authenticated staff account menu */

/* ============================================================================
   Stage 5B.6E - Staff Portal modern purple card & form visual system.
   Central, class-based. Retains the Prime Peculiar purple identity; adds a
   refined (not heavy) purple border to meaningful content groups, consistent
   white / very-light-lilac surfaces, and one form treatment. Scoped to the
   Staff Portal shell (.staff-portal / .staff-main) so public site CSS is
   untouched.
   ========================================================================= */

/* ---- Canonical panel primitives ---------------------------------------- */
.staff-panel,
.staff-portal .staff-table-card,
.staff-portal .staff-card,
.staff-portal .staff-metric {
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    background: var(--panel-surface);
    box-shadow: var(--panel-shadow);
}
.staff-panel--soft { background: var(--panel-surface-soft); }
.staff-panel__header,
.staff-portal .staff-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--panel-border);
}
.staff-panel__header h2 { margin: 0; font-size: 20px; }
.staff-panel__body { padding: 24px; }
.staff-card-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.staff-card-head-actions .staff-inline-form { display: inline-flex; }

.staff-portal a.staff-card,
.staff-portal .staff-card--module {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.staff-portal a.staff-card:hover,
.staff-portal .staff-card--module:hover,
.staff-portal a.staff-card:focus-visible,
.staff-portal .staff-card--module:focus-visible {
    border-color: var(--panel-border-strong);
    box-shadow: var(--panel-shadow-hover);
}

/* ---- Page heading block ---------------------------------------------------- */
.staff-portal .staff-page-head { align-items: flex-start; }
.staff-portal .staff-page-head h1 { font-size: clamp(26px, 3.4vw, 38px); color: var(--ink); }
.staff-portal .staff-eyebrow { color: var(--purple-700); }

/* ---- Identity / info cards (Profile is the reference implementation) ----- */
.staff-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
}
.staff-info-card,
.staff-data-field {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius-sm);
    background: var(--panel-surface-soft);
}
.staff-info-card dt,
.staff-info-card .staff-info-card__label,
.staff-data-field__label {
    margin: 0;
    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.staff-info-card dd,
.staff-info-card .staff-info-card__value,
.staff-data-field__value {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
@media (max-width: 900px) {
    .staff-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .staff-info-grid { grid-template-columns: 1fr; }
}

/* ---- Form sections (fieldsets read as cards, even with one field) -------- */
.staff-portal .contact-fieldset,
.staff-form-section {
    margin: 0 0 18px;
    padding: 20px 22px;
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius-sm);
    background: var(--panel-surface);
}
.staff-portal .contact-fieldset > legend,
.staff-form-section > legend,
.staff-form-section > h3 {
    padding: 0 6px;
    margin-left: -6px;
    color: var(--purple-800);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---- One form treatment: inputs / selects / textareas / file ------------ */
.staff-main .contact-form,
.staff-main .staff-form { display: grid; gap: 16px; }
.staff-main .contact-form label,
.staff-main .staff-form label,
.staff-form-section label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}
.staff-main .contact-form input:not([type="checkbox"]):not([type="radio"]),
.staff-main .contact-form select,
.staff-main .contact-form textarea,
.staff-main .staff-form input:not([type="checkbox"]):not([type="radio"]),
.staff-main .staff-form select,
.staff-main .staff-form textarea,
.staff-main .staff-filters input,
.staff-main .staff-filters select,
.staff-form-section input:not([type="checkbox"]):not([type="radio"]),
.staff-form-section select,
.staff-form-section textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}
.staff-main .contact-form textarea,
.staff-main .staff-form textarea,
.staff-form-section textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.staff-main .contact-form input[type="file"],
.staff-form-section input[type="file"] { padding: 9px 12px; background: var(--panel-surface-soft); }
.staff-main .contact-form input:focus-visible,
.staff-main .contact-form select:focus-visible,
.staff-main .contact-form textarea:focus-visible,
.staff-main .staff-form input:focus-visible,
.staff-main .staff-form select:focus-visible,
.staff-main .staff-form textarea:focus-visible,
.staff-main .staff-filters input:focus-visible,
.staff-main .staff-filters select:focus-visible,
.staff-form-section input:focus-visible,
.staff-form-section select:focus-visible,
.staff-form-section textarea:focus-visible {
    outline: none;
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px var(--field-focus-ring);
}
.staff-main .contact-form input[readonly],
.staff-main .contact-form input:disabled,
.staff-main .staff-form input[readonly],
.staff-form-section input[readonly] {
    background: var(--surface-soft);
    color: var(--ink-soft);
    cursor: not-allowed;
}
.staff-main .contact-form input[aria-invalid="true"],
.staff-form-section input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}
.staff-portal .checkbox-label,
.staff-portal label.checkbox-label {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 9px;
    font-weight: 500;
}

.staff-portal .staff-hint,
.staff-main .contact-form .staff-hint {
    margin: 2px 0 0;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.5;
}
.staff-portal .profile-avatar-preview { margin: 0 0 12px; }
.staff-portal .profile-avatar-preview img,
.staff-info-card__value img {
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    object-fit: cover;
}

/* ---- Name / primary-value emphasis in tables --------------------------- */
.staff-portal .staff-table tbody th { font-weight: 700; color: var(--ink); }
.staff-portal .staff-table tbody td { color: var(--ink-soft); }
.staff-portal .staff-table tbody tr:hover { background: var(--panel-surface-soft); }
.staff-portal .staff-table th,
.staff-portal .staff-table td { border-bottom: 1px solid var(--panel-border); }
.staff-portal .staff-table thead th { background: var(--panel-surface-soft); color: var(--ink-soft); }

/* ---- Badges: compact, refined ---------------------------------------- */
.staff-portal .staff-badge {
    border: 1px solid var(--panel-border);
    background: var(--panel-surface-soft);
    color: var(--purple-800);
    border-radius: 999px;
    letter-spacing: .05em;
}
.staff-portal .staff-badge--ready { border-color: rgba(19, 121, 91, 0.28); background: #e8f6ef; color: var(--success); }
.staff-portal .staff-badge--blue { border-color: rgba(23, 105, 194, 0.28); background: var(--blue-50); color: var(--blue-700); }
.staff-portal .staff-badge--danger { border-color: rgba(180, 35, 24, 0.28); background: #fdeceb; color: var(--danger); }

/* ---- Alerts: keep semantic colour, add the subtle purple frame ------- */
.staff-portal .staff-alert { border-radius: var(--panel-radius-sm); }
/* `.staff-alert { display: grid }` (base rule above, near line 3068) has the same specificity
   as the browser's default `[hidden] { display: none }` and loads later, so it silently wins —
   a script setting `el.hidden = true` on a `.staff-alert` (e.g. the Store's "quantities
   unavailable" shortage banner) has no visible effect even though the attribute IS set
   correctly. `.staff-alert[hidden]` outranks the bare `.staff-alert` rule, restoring `hidden`'s
   normal behavior everywhere this class is used — same class of fix as `.button[hidden]` above. */
.staff-alert[hidden] { display: none; }
.staff-portal .form-errors,
.staff-portal .form-success,
.staff-portal [data-form-error] { border-radius: var(--panel-radius-sm); }

/* ---- Actions row spacing ------------------------------------------------ */
.staff-portal .credential-actions,
.staff-portal .form-actions,
.staff-portal .staff-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---- Credential panel (account created / password reset) --------------- */
.staff-portal .credential-panel { border: 1px solid var(--panel-border, rgba(106,27,154,.16)); }
.staff-portal .credential-delivery {
    margin: 0 24px 4px; padding: 10px 14px; border-radius: 10px;
    background: var(--panel-surface-soft, #f4f0fa); font-size: .92rem;
}
.staff-portal .credential-delivery--ok { background: #e8f6ef; color: var(--success, #13795b); }
.staff-portal .credential-delivery--fail { background: #fdeceb; color: var(--danger, #b42318); }
.staff-portal .credential-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 24px; margin: 0 24px 18px; padding: 16px 18px;
    background: var(--panel-surface-soft, #f4f0fa); border-radius: 12px;
}
.staff-portal .credential-summary > div { margin: 0; }
.staff-portal .credential-summary dt {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--purple-700, #6a1b9a); margin-bottom: 2px;
}
.staff-portal .credential-summary dd { margin: 0; font-weight: 600; word-break: break-word; }
.staff-portal .credential-summary__copyable dd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.staff-portal .credential-field {
    display: block; margin: 0 24px 16px; font-size: .82rem; font-weight: 600;
    color: var(--purple-700, #6a1b9a);
}
.staff-portal .credential-field input {
    display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
    font: 600 1.05rem/1.3 var(--font-mono, monospace); letter-spacing: .03em;
    background: #fff; border: 1px dashed var(--panel-border, rgba(106,27,154,.3));
    border-radius: 10px; color: var(--purple-900, #3a0a5c);
}
.staff-portal .credential-actions { margin: 0 24px 8px; }
.staff-portal .credential-note {
    margin: 0 24px 22px; padding: 10px 14px; font-size: .86rem;
    background: #fff8e6; border: 1px solid rgba(180, 140, 0, .25);
    border-radius: 10px; color: #6b5300;
}
.staff-portal .button--small { padding: 4px 10px; font-size: .78rem; }
.staff-portal [data-copy-target].is-copied { background: var(--success, #13795b); border-color: var(--success, #13795b); color: #fff; }

/* ---- Auth-shell (Change Password / login card) form parity ----------- */
.staff-auth-page .login-form input,
.page-login .login-card .login-form input {
    border: 1px solid var(--field-border);
    border-radius: 10px;
}
.staff-auth-page .login-form input:focus-visible,
.page-login .login-card .login-form input:focus-visible {
    outline: none;
    border-color: var(--purple-600);
    box-shadow: 0 0 0 3px var(--field-focus-ring);
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
    .staff-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .staff-info-grid { grid-template-columns: 1fr; }
    .staff-panel__header,
    .staff-portal .staff-card-head { padding: 16px 18px; }
    .staff-portal .contact-fieldset,
    .staff-form-section { padding: 16px 16px; }
    .staff-panel__body { padding: 18px; }
}

/* ---- Stage 5B.6E: breathing room for panels whose content is a direct child --- */
.staff-portal .staff-table-card > h2,
.staff-portal .staff-table-card > p,
.staff-portal .staff-table-card > .staff-filters,
.staff-portal .staff-table-card > .contact-form,
.staff-portal .staff-table-card > form:not(.staff-filters) { padding-left: 24px; padding-right: 24px; }
.staff-portal .staff-table-card > h2 { padding-top: 22px; margin-bottom: 4px; }
.staff-portal .staff-table-card > .staff-filters { padding-top: 16px; padding-bottom: 16px; }
.staff-portal .staff-table-card > .contact-form,
.staff-portal .staff-table-card > form:not(.staff-filters) { padding-top: 18px; padding-bottom: 22px; }
.staff-portal .staff-table-card > .staff-panel__body { padding: 24px; }
@media (max-width: 600px) {
    .staff-portal .staff-table-card > h2,
    .staff-portal .staff-table-card > p,
    .staff-portal .staff-table-card > .staff-filters,
    .staff-portal .staff-table-card > .contact-form,
    .staff-portal .staff-table-card > form:not(.staff-filters) { padding-left: 16px; padding-right: 16px; }
    .staff-portal .staff-table-card > .staff-panel__body { padding: 18px; }
}

/* Finance Record Payment: one searchable charge control plus pre-payment account context. */
.finance-payment-card .finance-charge-field { display: grid; gap: 7px; position: relative; }
.finance-payment-card .finance-charge-field > label { color: var(--ink); font-size: 13px; font-weight: 600; }
.finance-charge-combobox { position: relative; }
.finance-charge-options {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: min(360px, 55vh);
    overflow-y: auto;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(28, 17, 48, .16);
}
.finance-charge-option,
.finance-charge-options__empty { margin: 0; padding: 11px 13px; font-size: 13px; line-height: 1.45; }
.finance-charge-option { cursor: pointer; border-bottom: 1px solid var(--panel-border); }
.finance-charge-option:last-child { border-bottom: 0; }
.finance-charge-option:hover,
.finance-charge-option.is-active { background: var(--panel-surface-soft); color: var(--purple-800); }
.finance-charge-status { min-height: 18px; }
.finance-payment-summary {
    padding: 16px;
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius-sm);
    background: var(--panel-surface-soft);
}
.finance-payment-summary > .staff-hint { margin: 0; }
.finance-payment-summary__identity { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 14px; }
.finance-payment-summary__identity strong { color: var(--purple-800); }
.finance-payment-summary__identity span { color: var(--ink-soft); }
.finance-payment-summary__sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.finance-payment-summary__sections > section { padding: 14px; border: 1px solid var(--panel-border); border-radius: 10px; background: #fff; }
.finance-payment-summary__sections h3 { margin: 0 0 10px; color: var(--purple-800); font-size: 14px; }
.finance-payment-summary__grid { display: grid; gap: 9px; margin: 0; }
.finance-payment-summary__grid > div { display: flex; justify-content: space-between; gap: 16px; }
.finance-payment-summary__grid dt { color: var(--ink-soft); font-size: 12px; }
.finance-payment-summary__grid dd { margin: 0; text-align: right; font-size: 13px; font-weight: 700; }
@media (max-width: 720px) {
    .finance-payment-summary__sections { grid-template-columns: 1fr; }
    .finance-payment-summary__grid > div { align-items: start; }
}

/* ================================================================
   Stage 5B.6F — Staff action button contract
   Every actionable button / button-like link across staff.cybytez.app
   must look clickable and carry a visible border. Four canonical
   variants (Primary, Secondary, Ghost, Danger) all bordered, plus a
   bounded fallback that upgrades legacy raw <button> / <a class="button">
   controls in the staff shell. Shell controls (the menu button, rail
   links, account menu) are deliberately NOT matched — no single
   aggressive global selector.
   ================================================================ */

/* -- Canonical variants: all carry a visible border ------------------ */
.button--primary {
    border-color: var(--purple-800);
}

.button--secondary {
    border-color: rgba(91, 33, 182, 0.45);
    color: var(--purple-800);
    background: var(--purple-50);
}

.button--secondary:hover {
    border-color: var(--purple-700);
    background: var(--purple-100);
}

.button--ghost {
    border-color: rgba(91, 33, 182, 0.38);
}

.button--danger {
    border-color: #7f1a12;
    color: #fff;
    background: var(--danger);
}

.button--danger:hover {
    border-color: #63140e;
    background: #9a1e14;
}

/* A bare .button with no variant must never render as plain text —
   give it the Secondary treatment so links such as "Back to People"
   and "Cancel" stay clearly bordered. */
.button:not([class*="button--"]) {
    border-color: rgba(91, 33, 182, 0.45);
    color: var(--purple-800);
    background: var(--purple-50);
}

.button:not([class*="button--"]):hover {
    border-color: var(--purple-700);
    background: var(--purple-100);
}

/* -- Bounded staff-shell fallback ----------------------------------- */
/* Legacy raw controls that predate the canonical classes: Filter bars,
   inline table actions (Activate / Deactivate / Publish / Remove /
   Generate charges / Link student), Sign out, Change password, and the
   notification action row. Scoped to known containers; the menu toggle,
   sidebar nav and the bare-eye visibility toggles (.protected-money__toggle,
   .password-reveal-toggle) are never in scope — this fallback's specificity
   (0,5,1) would otherwise silently outrank those controls' own single-class
   transparent-hit-area rules (0,1,0) and re-add the exact bordered/white
   button chrome they deliberately opt out of, which is what previously made
   the money eye render as an empty rounded rectangle wherever it sat inside
   .staff-main. */
.staff-portal .staff-main button:not([class*="button--"]):not(.staff-menu-toggle):not(.staff-badge):not(.protected-money__toggle):not(.password-reveal-toggle),
.staff-portal .staff-main a.button:not([class*="button--"]),
.staff-portal .staff-filters button:not([class*="button--"]),
.staff-portal .staff-inline-form button:not([class*="button--"]),
.staff-portal .notification-actions form:not(:has(.button)) button,
.staff-portal .notification-actions > a:not(.button){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid rgba(91, 33, 182, 0.45);
    border-radius: 10px 10px 10px 3px;
    color: var(--purple-800);
    background: var(--purple-50);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.staff-portal .staff-main button:not([class*="button--"]):not(.staff-menu-toggle):not(.staff-badge):not(.protected-money__toggle):not(.password-reveal-toggle):hover,
.staff-portal .staff-main a.button:not([class*="button--"]):hover,
.staff-portal .staff-filters button:not([class*="button--"]):hover,
.staff-portal .staff-inline-form button:not([class*="button--"]):hover,
.staff-portal .notification-actions form:not(:has(.button)) button:hover,
.staff-portal .notification-actions > a:not(.button):hover{
    border-color: var(--purple-700);
    background: var(--purple-100);
}

/* Topbar Sign out / Change password read as quiet white ghosts. */

/* Stage 5B.6H — clickable Finance oversight metric + fee-item row builder */
.staff-portal .staff-metric--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.staff-portal .staff-metric--link:hover,
.staff-portal .staff-metric--link:focus-visible {
    border-color: var(--panel-border-strong);
    box-shadow: var(--panel-shadow-hover);
    transform: translateY(-2px);
}
.staff-portal .staff-metric--link strong { color: #4c167a; }
.staff-portal .fee-item-rows { border: 1px solid var(--panel-border); border-radius: var(--panel-radius-sm); padding: 16px; margin: 6px 0 4px; }
.staff-portal .fee-item-rows legend { padding: 0 6px; color: var(--purple-800); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.staff-portal .fee-item-rows .staff-table th,
.staff-portal .fee-item-rows .staff-table td { padding: 8px 10px; }
.staff-portal .fee-item-rows input { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--field-border); border-radius: 8px; background: #fff; font: inherit; }
.staff-portal .fee-item-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 12px; }
.staff-portal .fee-item-library { display: grid; gap: 6px; font-size: 12px; font-weight: 800; color: #3c3748; }
.staff-portal .fee-item-library select { min-height: 40px; padding: 0 10px; border: 1px solid var(--field-border); border-radius: 8px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
    .mobile-nav-handle { transition: none; }
}

/* ================================================================
   Stage 5B.6I — header notification bell (the unread badge is synchronized
   from the server's value; see syncBadges() in assets/js/app.js).
   ================================================================ */

/* -- Header notification bell -------------------------------------- */
.staff-portal .staff-bell {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(91, 33, 182, 0.30);
    border-radius: 10px 10px 10px 3px;
    color: var(--purple-800);
    background: #fff;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease;
}
.staff-portal .staff-bell:hover,
.staff-portal .staff-bell[aria-current="page"] {
    border-color: var(--purple-600);
    background: var(--purple-50);
}
.staff-portal .staff-bell:focus-visible {
    outline: 3px solid rgba(33, 131, 223, 0.48);
    outline-offset: 2px;
}
.staff-portal .staff-bell__icon { display: block; }
.staff-portal .staff-bell__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--blue-600);
    color: #fff;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}
@media (max-width: 600px) {
    .staff-portal .staff-bell { width: 34px; height: 34px; }
}

/* ================================================================
   Part C — unified interaction feedback
   One place for coherent button states (default / hover / focus-visible /
   active / disabled) across the canonical .button system and the bounded
   staff-shell fallback, plus a subtle "this surface is alive" hover on
   non-clickable bounded cards. Restrained: one small translateY on press;
   colour / border / shadow carry the rest. Transforms are dropped under
   prefers-reduced-motion (see that block above); colour feedback stays.
   ================================================================ */

/* -- Canonical .button: pressed + focus-visible + disabled ---------- */
.button:active {
    transform: translateY(1px);
}
.button--primary:active {
    box-shadow: 0 4px 12px rgba(91, 33, 182, 0.22);
}
.button--white:active,
.button--secondary:active,
.button--danger:active,
.button:not([class*="button--"]):active {
    box-shadow: none;
}
.button:focus-visible {
    outline: 3px solid rgba(33, 131, 223, 0.5);
    outline-offset: 2px;
}
.button:disabled,
.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
}
.button:disabled:hover,
.button[disabled]:hover,
.button[aria-disabled="true"]:hover,
.button:disabled:active,
.button[disabled]:active,
.button[aria-disabled="true"]:active {
    transform: none;
    box-shadow: none;
}

/* -- Bounded staff-shell fallback: pressed + focus-visible + disabled -- */
.staff-portal .staff-main button:not([class*="button--"]):not(.staff-menu-toggle):not(.staff-badge):not(.protected-money__toggle):not(.password-reveal-toggle):active,
.staff-portal .staff-main a.button:not([class*="button--"]):active,
.staff-portal .staff-filters button:not([class*="button--"]):active,
.staff-portal .staff-inline-form button:not([class*="button--"]):active,
.staff-portal .notification-actions form:not(:has(.button)) button:active,
.staff-portal .notification-actions > a:not(.button):active{
    transform: translateY(1px);
    border-color: var(--purple-700);
    background: var(--purple-100);
}
.staff-portal .staff-main button:not([class*="button--"]):not(.staff-menu-toggle):not(.staff-badge):not(.protected-money__toggle):not(.password-reveal-toggle):focus-visible,
.staff-portal .staff-filters button:not([class*="button--"]):focus-visible,
.staff-portal .staff-inline-form button:not([class*="button--"]):focus-visible{
    outline: 3px solid rgba(33, 131, 223, 0.5);
    outline-offset: 2px;
}
.staff-portal .staff-main button:not([class*="button--"]):not(.protected-money__toggle):not(.password-reveal-toggle):disabled,
.staff-portal .staff-main button:not([class*="button--"]):not(.protected-money__toggle):not(.password-reveal-toggle)[aria-disabled="true"],
.staff-portal .staff-filters button:not([class*="button--"]):disabled,
.staff-portal .staff-inline-form button:not([class*="button--"]):disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.staff-portal .staff-main button:not([class*="button--"]):not(.protected-money__toggle):not(.password-reveal-toggle):disabled:hover,
.staff-portal .staff-filters button:not([class*="button--"]):disabled:hover,
.staff-portal .staff-inline-form button:not([class*="button--"]):disabled:hover {
    transform: none;
}

/* -- Non-clickable bounded cards acknowledge the pointer -----------
   "This part of the interface is alive", not "this is clickable": no
   pointer cursor, no lift, no fake affordance — a slightly stronger
   purple hairline and a touch more shadow. Genuinely interactive cards
   (a.staff-card, .staff-card--module, .staff-metric--link) keep their own
   stronger, lifted hover defined earlier. */
.staff-portal .staff-info-card,
.staff-portal .staff-data-field,
.staff-portal .academic-context,
.staff-portal .staff-message,
.staff-portal .staff-detail-list > div,
.staff-portal .staff-metric:not(a):not(.staff-metric--link),
.staff-portal .staff-card:not(a):not(.staff-card--module) {
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.staff-portal .staff-info-card:hover,
.staff-portal .staff-data-field:hover,
.staff-portal .academic-context:hover,
.staff-portal .staff-message:hover,
.staff-portal .staff-detail-list > div:hover,
.staff-portal .staff-metric:not(a):not(.staff-metric--link):hover,
.staff-portal .staff-card:not(a):not(.staff-card--module):hover {
    border-color: var(--panel-border-strong);
    box-shadow: var(--panel-shadow-hover);
}

/* ================================================================
   Part D — notification bell popover + grouped collapsible navigation.
   Reuses the Part A/C purple-on-light system and Part C interaction
   states. No competing visual system. Movement is dropped under
   prefers-reduced-motion (global rule); colour/border feedback stays.
   ================================================================ */

/* -- Bell popover ------------------------------------------------------ */
.staff-bell-wrap { position: relative; display: flex; align-items: center; }

.notification-popover {
    position: absolute;
    z-index: 200;
    top: calc(100% + 10px);
    right: 0;
    width: min(92vw, 360px);
    max-height: min(72vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--panel-border-strong);
    border-radius: 14px 14px 14px 6px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(40, 24, 70, 0.22);
    color: var(--ink);
}
.notification-popover[hidden] { display: none; }
.notification-popover__head {
    flex: 0 0 auto;
    padding: 14px 16px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--panel-surface-soft);
}
.notification-popover__head h2 { margin: 0; font-size: 14px; color: var(--purple-800); }
.notification-popover__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.notification-popover__empty { margin: 0; padding: 26px 16px; text-align: center; color: var(--ink-soft); font-size: 13px; }
.notification-popover__item {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.notification-popover__item:last-child { border-bottom: 0; }
.notification-popover__item--unread { background: var(--purple-50); }
.notification-popover__item--unread::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--purple-500);
}
.notification-popover__dot {
    position: absolute;
    top: 15px; right: 14px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--blue-600);
}
.notification-popover__link {
    display: grid;
    gap: 3px;
    color: inherit;
    text-decoration: none;
}
.notification-popover__link:hover .notification-popover__title,
.notification-popover__link:focus-visible .notification-popover__title { text-decoration: underline; }
.notification-popover__meta {
    color: var(--purple-700);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.notification-popover__title { font-size: 13px; font-weight: 700; padding-right: 14px; }
.notification-popover__message {
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notification-popover__item time { color: var(--ink-soft); font-size: 10px; }
.notification-popover__markread { margin-top: 2px; }
.notification-popover__markread button {
    border: 1px solid rgba(91, 33, 182, 0.4);
    border-radius: 8px;
    padding: 5px 10px;
    color: var(--purple-800);
    background: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.notification-popover__markread button:hover { border-color: var(--purple-700); background: var(--purple-100); }
.notification-popover__markread button:active { transform: translateY(1px); }
.notification-popover__markread button:disabled { opacity: 0.55; cursor: not-allowed; }
.notification-popover__all {
    flex: 0 0 auto;
    display: block;
    padding: 12px 16px;
    border-top: 1px solid var(--panel-border);
    color: var(--purple-700);
    background: var(--panel-surface-soft);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
}
.notification-popover__all:hover, .notification-popover__all:focus-visible { text-decoration: underline; }
.notification-popover__error { margin: 0; padding: 10px 16px; color: var(--danger); background: #fff6f5; font-size: 12px; }
.notification-popover__error[hidden] { display: none; }
.notification-popover__open-form { display: none; }

@media (max-width: 560px) {
    .notification-popover {
        position: fixed;
        top: 66px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 76vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-popover__markread button:active{ transition: none; transform: none; }
}

/* ================================================================
   Part E — canonical list pagination control (Previous / Page X of Y /
   Next). Extends the existing .staff-pagination container; no parallel
   system. Steps read as restrained ghost actions and inherit the Part C
   default / hover / focus-visible / active / disabled behaviour. A single
   page renders no nav at all (renderPagination() returns '').
   ================================================================ */
.staff-portal .staff-pagination {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.staff-pagination__status {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
}
.staff-pagination .staff-pagination__step {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid rgba(91, 33, 182, 0.38);
    border-radius: 10px 10px 10px 3px;
    color: var(--purple-800);
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.staff-pagination .staff-pagination__step[rel="next"] { border-radius: 10px 10px 3px 10px; }
.staff-pagination .staff-pagination__step:hover {
    border-color: var(--purple-700);
    background: var(--purple-100);
}
.staff-pagination .staff-pagination__step:focus-visible {
    outline: 3px solid rgba(33, 131, 223, 0.5);
    outline-offset: 2px;
}
.staff-pagination .staff-pagination__step:active { transform: translateY(1px); }
.staff-pagination .staff-pagination__step.is-disabled {
    opacity: 0.5;
    border-color: var(--line);
    color: var(--ink-soft);
    cursor: default;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .staff-pagination .staff-pagination__step:active { transform: none; }
}
@media (max-width: 600px) {
    .staff-portal .staff-pagination { justify-content: center; gap: 8px; }
    .staff-pagination__status { order: -1; width: 100%; text-align: center; }
}

/* ================================================================
   Part F — People: Add-person menu, Parent/Guardian child
   expansion, and the student-intake form helpers. Extends the
   existing staff panel/form system; no parallel component set.
   ================================================================ */
.people-add-menu { position: relative; }
.people-add-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.people-add-menu > summary::-webkit-details-marker { display: none; }
.people-add-menu > summary::after { content: "\25be"; margin-left: 8px; font-size: 0.8em; }
.people-add-menu[open] > summary::after { content: "\25b4"; }
.people-add-menu__list {
    position: absolute; right: 0; z-index: 30; min-width: 220px; margin-top: 6px; padding: 6px;
    display: grid; gap: 2px;
    background: #fff; border: 1px solid var(--line, #e4e0eb); border-radius: 10px 10px 10px 3px;
    box-shadow: 0 10px 26px rgba(41, 20, 76, 0.14);
}
.people-add-menu__list a {
    display: block; padding: 9px 12px; border-radius: 8px; color: var(--purple-800, #4c167a);
    font-size: 13px; font-weight: 700; text-decoration: none;
}
.people-add-menu__list a:hover, .people-add-menu__list a:focus-visible { background: var(--purple-100, #f3ecfb); outline: 0; }

.staff-card-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Edit Record (People -> Registration): the button sits immediately before "Add person", pushed to the right with it. */
.staff-page-head > [data-edit-record] { margin-left: auto; flex: 0 0 auto; }
.staff-page-head > [data-edit-record] + .people-add-menu { margin-left: 0; }
.correction-search { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-bottom: 8px; }
.correction-search > label { grid-column: 1; }
.correction-search > button { grid-column: 2; }
.correction-search > [data-correction-status] { grid-column: 1 / -1; margin: 0; min-height: 1.2em; }
.correction-results { padding: 0 26px; }
.correction-results__title { margin: 8px 0; font-size: 14px; }
.correction-results__list { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.correction-results__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line, #e4e0eb); border-radius: 10px; background: #fff; }
.correction-results__list li > div { display: grid; gap: 2px; font-size: 13px; }
.correction-results__list li > div > span { color: #706a7b; }
.correction-selected { padding: 8px 26px 26px; border-top: 1px solid var(--line, #e4e0eb); margin-top: 8px; }
.correction-selected h3 { margin: 4px 0; font-size: 18px; }
.correction-selected .staff-form { padding: 18px 0 0; }
.correction-changes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.staff-hint--error { color: #a23b35; }
@media (max-width: 600px) {
    .correction-search { grid-template-columns: 1fr; }
    .correction-search > button { grid-column: 1; }
    .correction-results__list li { flex-direction: column; align-items: stretch; }
    .staff-page-head > [data-edit-record] { margin-left: 0; }
}

.people-children-panel > td { background: #faf9fc; }
.people-children-panel .staff-table { min-width: 640px; }
.people-link-form { margin-top: 12px; flex-wrap: wrap; gap: 8px; }

.staff-check-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 6px 0; }
.staff-check-row > span { flex: 1 1 220px; font-size: 13px; }

/* Administration — Special Access (temporary delegation). Reuses staff-form / staff-table /
   staff-badge / staff-check-row; only the collapsible area picker is local. */
.special-access-areas { display: grid; gap: 8px; }
.special-access-module { border: 1px solid #e4e0eb; border-radius: 10px; background: #faf9fc; }
.special-access-module > summary { padding: 12px 16px; font-weight: 800; color: #3b176d; font-size: 13px; cursor: pointer; }
.special-access-module[open] > summary { border-bottom: 1px solid #e4e0eb; }
.special-access-area { padding: 8px 16px 12px; }
.special-access-area + .special-access-area { border-top: 1px solid #eeeaf3; }
.special-access-area__label { margin: 6px 0 2px; color: #756f82; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.special-access-area .staff-check-row > span small { color: #756f82; font-weight: 600; }

/* School Community — Add Parent/Guardian server-paginated student selector. Reuses the shared
   .staff-table / .staff-pagination / .staff-empty-state patterns; only the search row + a
   couple of table tweaks are local. */
.parent-student-picker__search { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.parent-student-picker__search label { font-size: 12px; font-weight: 800; color: #3c3748; }
.parent-student-picker__search input { flex: 1 1 240px; min-height: 44px; padding: 0 12px; border: 1px solid #dcd8e4; border-radius: 9px; background: #fff; }
.parent-student-picker__meta { margin: 4px 0 10px; color: #706a7b; font-size: 12px; }
.parent-student-picker__table { min-width: 640px; }
.parent-student-picker__table td:first-child { width: 1%; white-space: nowrap; }
.parent-student-picker__table input[type="checkbox"] { width: 18px; height: 18px; }
.parent-student-picker__table select { min-height: 36px; padding: 0 8px; border: 1px solid #dcd8e4; border-radius: 8px; background: #fff; }
.parent-student-picker .staff-pagination { margin-top: 4px; border: 1px solid #eeeaf3; border-radius: 12px; background: #fff; }
.parent-student-picker .staff-pagination__step { border: 1px solid #ddd5e7; border-radius: 9px; padding: 9px 12px; color: #4c167a; background: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.parent-student-picker .staff-pagination__step.is-disabled,
.parent-student-picker .staff-pagination__step:disabled { color: #a49db6; background: #f4f2f8; cursor: not-allowed; }

.staff-subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 10px; }

.staff-hint-list { margin: 0 0 16px; padding-left: 20px; color: var(--ink-soft, #706a7b); font-size: 13px; }
.staff-hint-list li { margin: 4px 0; }

@media (max-width: 600px) {
    .people-add-menu__list { right: auto; left: 0; }
}

/* ================================================================
   Part G — public Admission form. Extends the existing .contact-form
   / .form-row public form language; fieldsets read as section cards
   with purple identity headings, consistent with Parts A and C.
   ================================================================ */
.admission-form fieldset {
    margin: 0 0 20px;
    padding: 22px 22px 8px;
    border: 1px solid #e4e0eb;
    border-radius: 14px;
    background: #fff;
}
.admission-form legend {
    padding: 0 8px;
    color: #6a1b9a;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.form-hint {
    margin: 0 0 14px;
    color: #706a7b;
    font-size: 13px;
}
.admission-form input[readonly] {
    background: #f6f5fa;
    color: #706a7b;
}

/* ================================================================
   Part H — Category dimension. Small additions only; the Category
   selectors reuse the existing form controls and the Academic Setup
   list/table styles.
   ================================================================ */
.level-pill__categories {
    display: block;
    margin-top: 4px;
    color: #6a1b9a;
    font-weight: 700;
}
.staff-relationship-place select { min-width: 130px; }

.settings-subnav { top: 80px; }
.settings-logo-current { display: grid; justify-items: end; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.settings-footer-preview { padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-surface-soft); }

@media (max-width: 700px) {
    .settings-subnav { position: static; }
}

/* Omega Phase J — Leadership & succession workspace. */
.staff-portal .plain-list { margin: 0; padding-left: 1.1rem; }
.staff-portal .staff-alert--success { border-color: #1c7c4a; background: #eafaf1; color: #14532d; }
.staff-portal .staff-table-card--danger { border-color: #b42318; box-shadow: 0 0 0 1px rgba(180, 35, 24, .12); }
.staff-portal .staff-table-card--danger .staff-eyebrow { color: #b42318; }
.staff-portal .staff-detail__panel { margin-top: 1rem; padding: 1rem; border: 1px solid #d0d5dd; border-radius: 8px; background: #fcfcfd; }
.staff-portal .staff-detail__panel code { background: #fff2f0; padding: .1rem .35rem; border-radius: 4px; }

/* Post-Omega AD1-C — Staff Admissions connected workflow. */
.staff-portal .admissions-workflow { min-width: 0; }
.staff-portal .admissions-workflow .staff-page-head { flex-wrap: wrap; }
.staff-portal .admissions-workflow .staff-page-head > .button { flex: 0 0 auto; }
.staff-portal .admissions-workflow .staff-table-card,
.staff-portal .admissions-workflow .admissions-summary { margin-bottom: 18px; }
.staff-portal .admissions-filters { align-items: end; }
.staff-portal .admissions-filters label { display: grid; min-width: 160px; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.staff-portal .admissions-filters__search { flex: 1 1 240px; }
.staff-portal .admissions-filters__search > label { min-width: 0; }
.staff-portal .admissions-filters__search input { width: 100%; }
.staff-portal .admissions-summary { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr); gap: 20px; padding: 24px; border: 1px solid var(--panel-border-strong); border-radius: var(--panel-radius); background: linear-gradient(135deg, var(--purple-50), #fff 42%); box-shadow: var(--panel-shadow); }
.staff-portal .admissions-summary__lead h2 { margin: 5px 0 12px; color: var(--purple-900); font-size: clamp(24px, 3vw, 34px); }
.staff-portal .admissions-summary__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.staff-portal .admissions-summary__facts > div { min-width: 0; padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: 10px; background: rgba(255,255,255,.84); }
.staff-portal .admissions-summary dt { color: var(--ink-soft); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.staff-portal .admissions-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; font-weight: 700; }
.staff-portal .admissions-summary__action { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.staff-portal .admissions-status { display: inline-flex; width: fit-content; padding: 5px 9px; border-radius: 999px; color: #534b5e; background: #efedf3; font-size: 10px; font-weight: 800; line-height: 1.2; }
.staff-portal .admissions-status--submitted { color: #125e9a; background: #e8f3ff; }
.staff-portal .admissions-status--approved { color: #126b4a; background: #e3f6ed; }
.staff-portal .admissions-status--returned { color: #825500; background: #fff3cf; }
.staff-portal .admissions-status--rejected { color: #9a2f28; background: #fff0ee; }
.staff-portal .admissions-action-panel { border-top: 3px solid var(--purple-500); }
.staff-portal .admissions-action-panel--leadership { border-top-color: var(--blue-600); }
.staff-portal .admissions-action-panel--provision { border-top-color: #19875f; }
.staff-portal .admissions-decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 24px; }
.staff-portal .admissions-decision-grid > p { grid-column: 1 / -1; margin: 0; }
.staff-portal .admissions-decision-grid > .staff-form { align-content: start; min-width: 0; padding: 16px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-surface-soft); }
.staff-portal .admissions-decision-grid .staff-form-section { min-width: 0; }
.staff-portal .admissions-list__table td:last-child .button { white-space: nowrap; }

@media (max-width: 800px) {
    .staff-portal .admissions-summary { grid-template-columns: 1fr; }
    .staff-portal .admissions-summary__facts { grid-template-columns: 1fr 1fr; }
    .staff-portal .admissions-decision-grid { grid-template-columns: 1fr; }
    .staff-portal .admissions-decision-grid > p { grid-column: auto; }
}

@media (max-width: 700px) {
    .staff-portal .admissions-workflow .staff-page-head > .button { width: 100%; }
    .staff-portal .admissions-filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .staff-portal .admissions-filters label,
    .staff-portal .admissions-filters__search { min-width: 0; }
    .staff-portal .admissions-filters__search { grid-column: 1 / -1; }
    .staff-portal .admissions-filters > button { width: 100%; grid-column: 1 / -1; }
    .staff-portal .admissions-list { overflow: visible; padding: 12px; background: var(--panel-surface-soft); }
    .staff-portal .admissions-list__table { display: block; min-width: 0; }
    .staff-portal .admissions-list__table thead { display: none; }
    .staff-portal .admissions-list__table tbody { display: grid; gap: 12px; }
    .staff-portal .admissions-list__table tr { display: grid; min-width: 0; padding: 14px; border: 1px solid var(--panel-border); border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(40,24,70,.06); }
    .staff-portal .admissions-list__table th,
    .staff-portal .admissions-list__table td { display: grid; grid-template-columns: minmax(82px, 32%) minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
    .staff-portal .admissions-list__table td:last-child { border-bottom: 0; }
    .staff-portal .admissions-list__table th::before,
    .staff-portal .admissions-list__table td::before { content: attr(data-label); color: var(--ink-soft); font-size: 9px; font-weight: 800; letter-spacing: .05em; }
    .staff-portal .admissions-list__table td:last-child .button { width: 100%; white-space: normal; }
}

@media (max-width: 500px) {
    .staff-portal .admissions-summary { padding: 18px; }
    .staff-portal .admissions-summary__facts { grid-template-columns: 1fr; }
    .staff-portal .admissions-summary__action .button { width: 100%; }
    .staff-portal .admissions-filters { grid-template-columns: 1fr; }
    .staff-portal .admissions-filters__search,
    .staff-portal .admissions-filters > button { grid-column: auto; }
    .staff-portal .admissions-decision-grid { padding: 16px; }
}

/* Omega Phase L8 — dedicated Examinations application (exams.<domain>). Reuses the staff
   panel/table/badge system; only the top-level shell and login/landing surfaces are new. */
.exams-app { min-height: 100vh; margin: 0; color: #2c2438; background: #f6f5fa; display: flex; flex-direction: column; }
.exams-header { border-bottom: 1px solid #e4e0eb; background: linear-gradient(90deg, #28104e, #3b176d); color: #fff; }
.exams-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 34px; }
.exams-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.exams-brand__copy { display: grid; }
.exams-brand__copy strong { font-size: 14px; }
.exams-brand__copy small { color: #cbbced; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.exams-header__account { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #e9e1f9; }
.exams-header__account a { color: #fff; font-weight: 800; font-size: 11px; text-decoration: none; }
.exams-header__account a:hover, .exams-header__account a:focus-visible { text-decoration: underline; }
.exams-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 26px; border-bottom: 1px solid #e4e0eb; background: #fff; }
.exams-nav a { padding: 8px 12px; border-radius: 9px; color: #4c167a; font-size: 12px; font-weight: 700; text-decoration: none; }
.exams-nav a:hover, .exams-nav a:focus-visible { background: #f1ecfa; outline: 0; }
.exams-nav a[aria-current="page"] { color: #fff; background: #6a1b9a; }
.exams-main { flex: 1 0 auto; width: min(100% - 48px, 1120px); margin: 0 auto; padding: 40px 0 64px; }
.exams-footer { padding: 16px 34px; border-top: 1px solid #e4e0eb; background: #fff; color: #756f82; font-size: 11px; }
.exams-app--minimal .exams-nav { display: none; }
.exams-app--minimal .exams-main { width: min(100% - 40px, 620px); padding-top: 56px; }
.exams-login { max-width: 460px; margin: 0 auto; padding: 30px; border: 1px solid #e4e0eb; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px #29144c10; }
.exams-login h1 { margin: 0 0 10px; font-size: 24px; }
.exams-login > p { color: #706a7b; font-size: 13px; }
.exams-login-form { display: grid; gap: 14px; margin-top: 18px; }
.exams-login-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: #3c3748; }
.exams-login-form input { min-height: 42px; padding: 0 12px; border: 1px solid #dcd8e4; border-radius: 9px; font: inherit; }
.exams-login-form input:focus { border-color: #6a1b9a; outline: 3px solid #6a1b9a1f; }
.exams-login-alt { margin-top: 16px; color: #756f82; font-size: 12px; }
.exams-login-alt a { color: #5b21b6; font-weight: 700; text-decoration: none; }
.exams-login-alt a:hover, .exams-login-alt a:focus-visible { text-decoration: underline; }
.exams-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.exams-card { display: grid; align-content: start; gap: 8px; min-height: 150px; padding: 22px; border: 1px solid #e4e0eb; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px #29144c09; color: inherit; text-decoration: none; }
.exams-card:hover, .exams-card:focus-visible { border-color: #6a1b9a; outline: 0; }
.exams-card h2 { margin: 0; font-size: 18px; color: #3b176d; }
.exams-card p { margin: 0; color: #706a7b; font-size: 12px; }
@media (max-width: 800px) {
    .exams-header, .exams-footer { padding-left: 18px; padding-right: 18px; }
    .exams-main { width: min(100% - 32px, 1120px); }
    .exams-card-grid { grid-template-columns: 1fr; }
}

/* Omega post-L hotfix — Staff-consistent Exams shell and contained active attempts. */
.exams-header__inner,.exams-nav__inner,.exams-footer__inner{width:min(100% - 48px,1120px);margin-inline:auto}
.exams-header__inner{padding-inline:0}.exams-nav{padding:0}.exams-nav__inner{display:flex;flex-wrap:wrap;gap:4px;padding-block:8px}
.exams-mark{display:grid;width:38px;height:38px;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:10px;font-family:Manrope,sans-serif;font-weight:800}
.exams-brand--locked{cursor:default}.exams-header__account .button{color:#fff;border-color:rgba(255,255,255,.35)}
.exams-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.exams-auth-page .exams-login-form{margin-top:18px}
.exams-login-tabs{display:flex;margin:18px 0 0;border-bottom:1px solid #dcd8e4}.exams-login-tab{flex:1;padding:10px 0;font-size:14px;font-weight:600;color:#6b627a;text-align:center;text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.exams-login-tab:hover{color:#3b176d}.exams-login-tab.is-active{color:#6a1b9a;border-bottom-color:#6a1b9a;font-weight:700}
.exams-app--attempt{background:#f7f5fa}.exams-app--attempt .exams-main{width:min(100% - 28px,1180px);padding:24px 0 30px}.exams-header--locked{position:sticky;top:0;z-index:20}
.exams-attempt-footer{padding:10px;text-align:center;border-top:1px solid #e4e0eb;color:#756f82;background:#fff;font-size:11px;font-weight:700}
.student-cbt-submit__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.cbt-leave-dialog{width:min(100% - 32px,560px);padding:26px;border:0;border-radius:14px;box-shadow:0 22px 70px rgba(30,16,50,.28)}.cbt-leave-dialog::backdrop{background:rgba(25,15,38,.68)}
.finance-payment-dialog{width:min(100% - 32px,560px);padding:26px;border:1px solid var(--panel-border,rgba(106,27,154,.16));border-radius:14px;box-shadow:0 22px 70px rgba(30,16,50,.28);color:inherit}.finance-payment-dialog::backdrop{background:rgba(25,15,38,.68)}.finance-payment-dialog h2{margin-top:0}.finance-payment-dialog .credential-summary{margin:18px 0}.finance-payment-dialog .staff-form-actions{justify-content:flex-end}

/* Post-Omega AD1-A: bounded Admissions content editor. */
.admissions-editor-card{overflow:visible}
.admissions-editor{max-width:980px;margin:0 auto}
.admissions-editor code{overflow-wrap:anywhere;color:var(--purple-800)}
.admissions-editor__section{display:grid;gap:16px}
.admissions-editor__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.admissions-editor__media{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:14px;align-items:start;padding:16px;border:1px solid var(--panel-border);border-radius:12px;background:var(--panel-surface-soft)}
.admissions-editor__media img{grid-row:span 2;display:block;width:100%;max-height:180px;border-radius:10px;object-fit:cover}
.admissions-editor__items{display:grid;gap:12px}
.admissions-editor__items-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--purple-800)}
.admissions-editor__items-head span{color:var(--ink-soft);font-size:11px}
.admissions-editor__item{display:grid;gap:12px;margin:0;padding:16px;border:1px solid var(--panel-border);border-radius:12px;background:var(--panel-surface-soft)}
.admissions-editor__item legend{padding:0 5px;color:var(--purple-800);font-size:12px;font-weight:800}
.admissions-editor__item-controls{display:grid;grid-template-columns:minmax(90px,150px) auto auto;gap:14px;align-items:end}
.admissions-editor fieldset:disabled{opacity:.78}
@media(max-width:700px){
    .admissions-editor__grid,.admissions-editor__media{grid-template-columns:1fr}
    .admissions-editor__media img{grid-row:auto;width:min(100%,320px);max-height:220px}
    .admissions-editor__item-controls{grid-template-columns:1fr 1fr}
    .admissions-editor__item-controls>label:first-child{grid-column:1/-1}
}
.cbt-attempt-management{display:grid;gap:18px}.cbt-attempt-card{padding:24px}.cbt-attempt-details{grid-template-columns:repeat(4,minmax(0,1fr))}.cbt-attempt-history{margin:18px 0;padding:14px;border:1px solid #e4e0eb;border-radius:10px}.cbt-attempt-history summary{cursor:pointer;font-weight:800}.cbt-attempt-history ol{display:grid;gap:8px;margin-bottom:0}.cbt-attempt-history p{margin:2px 0;color:#706a7b}.cbt-reactivation-form{margin-top:18px;padding-top:18px;border-top:1px solid #e4e0eb}.cbt-reactivation-form fieldset{display:flex;flex-wrap:wrap;gap:14px;padding:14px;border:1px solid #dcd8e4;border-radius:10px}.cbt-reactivation-form textarea{min-height:100px}
@media(max-width:800px){.exams-header__inner,.exams-nav__inner,.exams-footer__inner{width:min(100% - 32px,1120px)}.exams-footer__inner{align-items:flex-start;flex-direction:column}.student-cbt-submit__actions{align-items:stretch;flex-direction:column}.cbt-attempt-details{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.cbt-attempt-details{grid-template-columns:1fr}.exams-header__account span{display:none}}
/* Omega Phase M4 — Shared shell additions for portal unification. */

/* Post-Omega U1 — shared Staff wayfinding, record actions and live-search state. */

.staff-action-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px}.staff-action-bar .button{min-height:38px;padding:9px 14px;font-size:12px}
.staff-search-status{min-height:1.2em;color:var(--ink-soft);font-size:.82rem}
[data-live-search-region][aria-busy="true"]{opacity:.62}
.staff-info-card__value{min-width:0;overflow-wrap:anywhere;word-break:break-word}
@media(max-width:600px){.staff-action-bar{align-items:stretch}.staff-action-bar .button{flex:1 1 100%;justify-content:center}}

/* Pre-X1-D root-cause correction — `.money-kpi-value` is THE single visual authority for
   headline/summary monetary KPI typography, derived from the verified computed style of
   /books' own Filtered Sales / Outstanding Balance (the operator's stated canonical
   reference): font-size 20px, font-weight 700, line-height 24px (1.2), color var(--ink).
   Every one of those values was read from getComputedStyle() on the live .bookstore-kpi-grid
   .staff-info-card__value element, not assumed from the stylesheet source.

   A prior version of this rule was a bare `.money-kpi-value` single-class selector
   (specificity 0,1,0) applied alongside `.bookstore-kpi-grid .staff-info-card__value`
   (0,2,0). That was enough to win in the compact `.staff-info-card` family, but inside
   `.staff-metric` cards (Dashboard Total Sales, every Finance account-summary figure)
   `.staff-metric strong` (0,1,1) — a plain, unrelated Staff-metric rule — still outranked it,
   so `.money-kpi-value` silently lost there and those figures kept rendering at the ambient
   35px/29px purple `.staff-metric strong` scale instead of the canonical monetary contract.
   That made "canonical" a documentation label, not an enforced rule — two different money
   presentations sharing one marker class.

   `.money-kpi-value.money-kpi-value` (the same class written twice) is the same specificity
   technique already used to lift `.protected-money[data-protected-money]` above the ambient
   `.staff-metric span` label rule elsewhere in this file: no `!important`, just a genuinely
   higher specificity (0,2,0) than `.staff-metric strong`'s (0,1,1), so wherever this class is
   intentionally applied it always wins, in every KPI family, at every viewport width (no
   competing rule here carries a narrower media query the ambient `.staff-metric strong`
   29px-mobile rule could still beat). Non-money Staff metrics (Total Titles, Units in Stock)
   never carry this class and keep their own unrelated typography untouched.

   protected-money's `font: inherit`/`color: inherit` (below) means the eye/value markup never
   needs its own size or color rule — it always reads whatever `.money-kpi-value` (or, for
   non-KPI protectedMoneyAmount() usages that carry neither class, the surrounding prose)
   declares. */
.bookstore-kpi-grid .staff-info-card__value,
.money-kpi-value.money-kpi-value {
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: var(--ink);
}

/* Pre-X1-D interaction stabilization — aggregate/KPI-only privacy with one synchronized,
   authenticated-browser-session state. The permanently visible Naira symbol stays outside the
   blurred value. The root state also applies instantly to dynamically inserted KPI markup. */
/* Root-cause fix — invisible-money/undersized-KPI correction. `.staff-metric span,
   .academic-context span{font-size:9px;font-weight:800;text-transform:uppercase}` (the
   ambient KPI *label* treatment) has specificity (0,1,1) and was silently winning over
   `.protected-money` and its `.protected-money__symbol`/`.protected-money__value` children —
   every one of those is itself a `<span>`, so wherever protectedMoneyAmount() renders inside
   a `.staff-metric` card (Dashboard Total Sales, every Finance account-summary figure) that
   label rule's higher specificity silently shrank the money to 9px uppercase grey text and
   blurred it into an illegible smudge, which is what the operator's screenshots show as a
   "small, weak" figure with no recognizable eye beside it. /books was unaffected only because
   it wraps money in `.staff-info-card`, never `.staff-metric`. Qualifying every protected-money
   selector with the `[data-protected-money]` root attribute (an extra specificity class, so
   (0,2,0)/(0,3,0)) beats that ambient rule wherever protected-money is used, present or
   future, without `!important`. */
.protected-money[data-protected-money] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font: inherit;
    color: inherit;
}
.protected-money[data-protected-money] .protected-money__symbol,
.protected-money[data-protected-money] .protected-money__value {
    font: inherit;
    color: inherit;
    font-weight: inherit;
    text-transform: none;
}
.protected-money__value {
    display: inline-block;
    min-width: 2ch;
    filter: blur(5px);
    user-select: none;
    transition: filter 150ms ease;
}
.protected-money.is-money-revealed .protected-money__value,
.money-privacy-visible .protected-money__value {
    filter: none;
    user-select: text;
}
/* Bare eye control — no permanent bordered/white button shell. A 30px transparent hit area
   keeps touch/keyboard use practical while only the 20px eye glyph is visible. */
.protected-money__toggle {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #5b21b6;
    background: transparent;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: color 160ms ease;
}
.protected-money__toggle:hover {
    color: var(--purple-700);
    background: transparent;
}
.protected-money__toggle:focus-visible {
    outline: 2px solid var(--purple-600);
    outline-offset: 2px;
    background: transparent;
}
.protected-money__icon {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    overflow: visible;
    color: #5b21b6;
    stroke: currentColor;
}
.protected-money__icon[hidden] {
    display: none !important;
}
.staff-card-head__actions { display: flex; align-items: center; gap: 8px; }
.staff-metrics-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }

/* Post-Omega X1-A — shared press-and-hold password reveal control, used by every
   [data-password-field]-wrapped input (Staff/Student/Parent login, change-password, Exams). */
.password-field {
    position: relative;
    display: block;
}
.password-field input { width: 100%; padding-right: 42px; }
.password-reveal-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #756f82;
    cursor: pointer;
}
.password-reveal-toggle:hover,
.password-reveal-toggle:focus-visible {
    color: var(--purple-700);
    outline: 0;
}
.password-reveal-toggle:focus-visible {
    outline: 2px solid var(--purple-600);
    outline-offset: -2px;
    border-radius: 6px;
}
.password-reveal-toggle[aria-pressed="true"] { color: var(--purple-700); }

@media (max-width: 600px) {
    .staff-card-head__actions { flex-wrap: wrap; }
}

/* Results release — one colour per result status on every screen:
   Draft amber, Submitted purple, Approved blue, Published green, Returned red. */
.staff-portal .staff-badge--draft { border-color: rgba(154, 103, 0, 0.3); background: #fdf1d6; color: #8a5a00; }
.staff-portal .staff-badge--purple { border-color: rgba(91, 33, 182, 0.28); background: #ece4fb; color: #5b21b6; }
.staff-portal .staff-badge--danger { border-color: rgba(163, 36, 47, 0.28); background: #fbe4e6; color: #a3242f; }
.staff-portal .staff-checkbox { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; font-weight: 700; }

/* "Your teaching assignments" row colour, and anywhere else a per-subject result status needs
   the same at-a-glance colour: default (nothing entered), yellow (entered), green (approved),
   blue (published). Report cards never use this scheme. */
.result-scope-row--entered { background: #fdf8e8; }
.result-scope-row--entered:hover { background: #faf0cc; }
.result-scope-row--approved { background: #eaf7ef; }
.result-scope-row--approved:hover { background: #d9f1e3; }
.result-scope-row--published { background: #e8f3ff; }
.result-scope-row--published:hover { background: #d6e9fd; }
.result-status-chip { display: inline-flex; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 800; }
.result-status-chip--entered { color: #8a5a00; background: #fdf1d6; }
.result-status-chip--approved { color: #13795b; background: #e2f5ec; }
.result-status-chip--published { color: #1767b0; background: #e8f3ff; }
.assign-subjects-chip { display: inline-flex; align-items: center; gap: 6px; }
.assign-subjects-chip__remove { border: 0; background: transparent; color: inherit; cursor: pointer; font-weight: 800; }
.staff-portal .staff-checkbox small { grid-column: 2; font-weight: 400; color: var(--ink-soft, #706a7b); }
.staff-portal .staff-alert.staff-alert--info { display: flex; gap: 8px; margin: 0 0 16px; border: 1px solid #c9dcf7; border-radius: 10px; color: #1f4fa8; background: #e8f1ff; }

/* Results review: class publish screen — Yes is the large default choice, No the small one. */
.staff-portal .result-class-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid #eeeaf3; background: #faf9fc; font-size: 13px; }
.staff-portal .result-class-foot__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Return Class Results: the confirmation panel is hidden until the footer button targets it (or a failed submit re-opens it); Cancel reloads the class view. */
.staff-portal .result-return-class { display: none; margin-top: 16px; padding: 18px 24px; border: 1px solid #e3dcef; border-radius: 10px; background: #fff; }
.staff-portal .result-return-class:target, .staff-portal .result-return-class--open { display: grid; gap: 12px; }
.staff-portal .result-return-class h2 { margin: 0; font-size: 17px; }
.staff-portal .result-return-class textarea { width: 100%; min-height: 84px; box-sizing: border-box; }
.staff-portal .result-return-class__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
@media (max-width: 600px) { .staff-portal .result-class-foot__actions, .staff-portal .result-return-class__actions { width: 100%; } .staff-portal .result-class-foot__actions .button, .staff-portal .result-return-class__actions .button { flex: 1 1 100%; text-align: center; } }
.staff-portal .result-chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px 4px; }
.staff-portal .result-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid #e4e0eb; border-radius: 20px; font-size: 12px; font-weight: 600; }
.staff-portal .release-choice { display: inline-flex; align-items: center; gap: 6px; }
.staff-portal .release-choice input { position: absolute; opacity: 0; pointer-events: none; }
.staff-portal .release-choice label { border: 1px solid #dcd8e4; border-radius: 8px; background: #fff; color: #706a7b; font-weight: 700; cursor: pointer; }
.staff-portal .release-choice__yes { padding: 7px 20px; font-size: 13px; }
.staff-portal .release-choice__no { padding: 3px 10px; font-size: 11px; }
.staff-portal .release-choice input:checked + .release-choice__yes { border-color: #13734f; background: #e2f5ec; color: #13734f; }
.staff-portal .release-choice input:checked + .release-choice__no { border-color: #a3242f; background: #fbe4e6; color: #a3242f; }
.staff-portal .release-choice input:focus-visible + label { outline: 2px solid #6a1b9a; outline-offset: 2px; }
.staff-portal .release-row--held th, .staff-portal .release-row--held td { background: #fdf3f4; }
.staff-portal .release-table td input[type="text"] { width: 100%; min-width: 160px; }

/* Phase 2 — filter cards. Every list filter is a small card in a grid: 3 columns on desktop, 2 on
   tablets and phones. No control is ever stretched across the full line. app.js wraps bare
   <select aria-label> / <input aria-label> controls in a .filter-card so they get a caption too. */
.staff-portal .staff-filters,
.staff-portal .filter-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}
.staff-portal .staff-filters > label,
.staff-portal .staff-filters > select,
.staff-portal .staff-filters > input,
.staff-portal .filter-card {
    min-width: 0;
    margin: 0;
}
.staff-portal .staff-filters > label,
.staff-portal .filter-card {
    display: grid;
    gap: 6px;
    padding: 10px 12px 12px;
    border: 1px solid var(--panel-border, #e4e0eb);
    border-radius: 12px;
    background: #fff;
    color: #756f82;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.staff-portal .staff-filters > label > input,
.staff-portal .staff-filters > label > select,
.staff-portal .filter-card > input,
.staff-portal .filter-card > select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    color: var(--ink, #201c30);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.staff-portal .staff-filters > button { justify-self: start; align-self: end; }
.staff-portal .filter-cards--auto > button[type="submit"],
.staff-portal .filter-cards--auto > .button[type="submit"] { display: none; }
.staff-portal .staff-filters > .staff-search-status { grid-column: 1 / -1; min-height: 0; }
.staff-portal .staff-filters > .staff-search-status:empty { display: none; }
@media (max-width: 900px) {
    .staff-portal .staff-filters,
    .staff-portal .filter-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .staff-portal .staff-filters > .filter-card--wide,
    .staff-portal .filter-cards > .filter-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
    .staff-portal .staff-filters,
    .staff-portal .filter-cards { grid-template-columns: minmax(0, 1fr); }
}
/* Filters already laid out as their own grids share the same cap of three columns. */
.staff-portal .cbt-result-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .staff-portal .cbt-result-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .staff-portal .admissions-filters { grid-template-columns: 1fr 1fr; }
    .staff-portal .cbt-result-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phase 2 — numbered pagination: "Showing 1–20 of 842" on the left, Previous 1 2 3 … 23 24 25 Next on
   the right. Wraps on phones. */
.staff-portal .staff-pagination { flex-wrap: wrap; }
.staff-pagination .staff-pagination__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.staff-pagination .staff-pagination__page,
.staff-pagination a.staff-pagination__page {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--purple-800);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.staff-pagination a.staff-pagination__page:hover { border-color: var(--purple-700); background: var(--purple-100); }
.staff-pagination a.staff-pagination__page:focus-visible { outline: 3px solid rgba(33, 131, 223, 0.5); outline-offset: 2px; }
.staff-pagination .staff-pagination__page.is-current { border-color: var(--purple-900, #3b176d); background: var(--purple-900, #3b176d); color: #fff; }
.staff-pagination .staff-pagination__gap { min-width: 18px; text-align: center; color: var(--ink-soft); }
@media (max-width: 600px) {
    .staff-portal .staff-pagination { justify-content: center; }
    .staff-pagination .staff-pagination__nav { justify-content: center; }
}

/* Phase 3 — dashboard: Quick actions first, then tabs; every figure is a link. */
.staff-portal .dashboard-actions { margin-bottom: 18px; }
.staff-portal .dashboard-actions .staff-card-head { padding: 16px 22px; }
.staff-portal .dashboard-actions .staff-card-head h2 { margin: 0; font-size: 17px; }
.staff-portal .dashboard-greeting { color: var(--ink-soft, #706a7b); font-size: 13px; font-weight: 600; }
.staff-portal .dashboard-actions__row { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 22px 20px; }
.staff-portal .dashboard-tabs { margin-bottom: 16px; }
@media (max-width: 600px) {
    .staff-portal .dashboard-actions .staff-card-head { flex-wrap: wrap; gap: 4px; padding: 14px 16px; }
    .staff-portal .dashboard-actions__row { padding: 12px 16px 16px; }
    .staff-portal .dashboard-actions__row .button { flex: 1 1 calc(50% - 10px); justify-content: center; text-align: center; }
}

/* One-time password page. */
.secret-value { margin: 6px 0 14px; padding: 16px 12px; border-radius: 12px; background: #f4effb; color: #3b176d; font: 700 20px/1.4 "DejaVu Sans Mono", ui-monospace, Menlo, monospace; letter-spacing: .04em; text-align: center; word-break: break-all; -webkit-user-select: all; user-select: all; }

/* Attendance history — term at a glance (weeks) and week detail (Mon-Fri). */
.staff-subnav__switch { display: inline-flex; margin-left: auto; align-items: center; }
.staff-subnav__switch label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.att-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 18px 26px 0; }
.att-summary div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.att-summary span, .att-summary small { color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.att-summary strong { font-size: 24px; color: var(--purple-800); }
.att-heading { margin: 22px 26px 6px; font-size: 16px; }
.att-week-head .att-heading { margin: 0; }
.att-note { margin: 0 26px 10px; }
.att-week-head { border-top: 1px solid var(--line); margin-top: 22px; }
.att-week-nav { display: flex; gap: 8px; }
.att-grid { min-width: 0; }
.att-grid th, .att-grid td { padding: 10px 8px; text-align: center; white-space: nowrap; }
.att-grid .att-student { position: sticky; left: 0; z-index: 1; min-width: 170px; padding-left: 26px; text-align: left; background: var(--surface); }
.att-grid thead .att-student { background: var(--surface-soft); }
.att-week a, .att-day a { color: inherit; font-weight: 800; text-decoration: none; }
.att-week a:hover, .att-day a:hover { text-decoration: underline; }
.att-day small { display: block; color: var(--ink-soft); font-weight: 600; }
.att-week--current { background: var(--blue-50); }
.att-week--selected { box-shadow: inset 0 -3px 0 var(--purple-600); }
.att-cell { font-weight: 800; font-size: 12px; }
.att-cell--full { background: #e6f5ee; color: var(--success); }
.att-cell--good { background: #fff3d6; color: #8a5a00; }
.att-cell--low { background: #fdeceb; color: var(--danger); }
.att-cell--none { color: var(--ink-soft); font-weight: 600; }
.att-total { min-width: 78px; }
.att-total small { display: block; }
.att-pct { font-size: 14px; }
.att-pct--low { color: var(--danger); }
.att-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 26px 0; color: var(--ink-soft); font-size: 12px; }
.att-key { display: inline-block; width: 14px; height: 14px; margin-right: -6px; border: 1px solid var(--line); border-radius: 4px; }
.att-key.att-cell--none { background: var(--surface-soft); }
.att-history .staff-table-wrap { margin-bottom: 4px; }
@media (max-width: 600px) {
    .att-summary { grid-template-columns: 1fr; padding: 14px 16px 0; }
    .att-heading, .att-note, .att-legend { margin-left: 16px; margin-right: 16px; }
    .att-grid .att-student { min-width: 130px; padding-left: 14px; }
}
.subject-class-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* Report card (on-screen): Subject column is always left-aligned. */
.report-card-results .staff-table th:first-child,.report-card-results .staff-table td:first-child{text-align:left}

/* ================================================================
   Phase 1 — slim fixed footer for the Staff and Examinations portals
   (authenticated pages AND login pages). ~48px, one line, sticky to
   the bottom of the viewport beside the sidebar; never covers content
   (it is in the flow and only "sticks" while scrolling). The Examinations
   variant renders the developer credit as plain text (no link).
   ================================================================ */
:root { --portal-footer-h: 48px; }
.portal-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex: 0 0 auto;
    margin-top: auto;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--portal-footer-h);
    padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
    border-top: 1px solid #e4e0eb;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
    color: #756f82;
    font-size: 12px;
    line-height: 1.2;
}
.portal-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    min-height: var(--portal-footer-h);
    max-width: 1220px;
    margin: 0 auto;
}
.portal-footer .copyright-notice,
.portal-footer .dev-credit { margin: 0; font-size: 12px; }
.portal-footer .copyright-notice { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-footer .dev-credit { flex: 0 0 auto; white-space: nowrap; }
.dev-credit--plain .dev-credit__name { color: var(--purple-700, #5b21b6); font-weight: 700; cursor: default; }

/* Login pages: a full-height column so the footer sits at the bottom even on a short page. */
body.staff-auth-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.staff-auth-page > main { flex: 1 0 auto; }
@media (max-width: 600px) {
    .portal-footer { font-size: 11px; }
    .portal-footer .copyright-notice,
    .portal-footer .dev-credit { font-size: 11px; }
    .portal-footer__inner { gap: 8px; }
}
@media print { .portal-footer { display: none !important; } }

/* Phase 3 — grade band Remark + Colour editor */
.grade-band-table input[data-band-remark] { min-width: 150px; }
.grade-band-table .staff-badge { margin-top: 4px; }

/* A fixed/sticky footer must never hide the element the browser scrolls into view (focus, anchors, form errors). */
html { scroll-padding-bottom: calc(var(--portal-footer-h, 48px) + 12px); }
.staff-badge[hidden] { display: none; }
.grade-band-table input[data-band-min] { min-width: 76px; }
.grade-band-table input[data-band-grade] { min-width: 64px; }

/* Phase 4 — "Save this setting?" confirmation */
.scope-dialog .staff-form { padding: 20px 26px 24px; display: grid; gap: 14px; }
.staff-main .scope-dialog .staff-form label.staff-radio,
.staff-main .scope-dialog .staff-form label.staff-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.staff-main .scope-dialog .staff-form label.staff-radio > input,
.staff-main .scope-dialog .staff-form label.staff-checkbox > input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.scope-dialog fieldset.staff-form-section { display: grid; gap: 8px; }
.scope-dialog__levels { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 6px 26px; }
.scope-dialog__sentence { padding: 12px 14px; border-radius: 10px; background: #f3edfb; color: #3b176d; margin: 0; }
.scope-dialog__editing { margin: 0; color: #706a7b; }

/* Phase 5 — Conduct tab */
.conduct-item-tabs { margin-bottom: 14px; }
.conduct-rename-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conduct-rename-form input[type="text"] { min-width: 220px; }
.conduct-grade-table input[type="text"] { width: 100%; max-width: 360px; }
.conduct-grade-table td:first-child input { max-width: 120px; }
.conduct-entry-table select { min-width: 190px; }
.staff-form-section[hidden] { display: none; }

/* Phase 6 — Books setup */
.bookstore-setup-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 4px 2px 0; }
.bookstore-setup-inline input[type="text"], .bookstore-setup-inline input[type="number"] { min-width: 200px; }

/* Phase 7 — attendance week strip, register toggle, holidays */
.att-strip { display: grid; gap: 10px; margin: 0 0 16px; }
.att-strip__weeks, .att-strip__days { display: flex; flex-wrap: wrap; gap: 6px; }
.att-strip__week, .att-strip__day { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 46px; padding: 6px 10px; border-radius: 10px; border: 2px solid transparent; font-weight: 700; font-size: 13px; text-decoration: none; line-height: 1.2; }
.att-strip__week small, .att-strip__day small { font-size: 10px; font-weight: 600; opacity: .85; }
.att-strip__day em { font-size: 10px; font-style: normal; font-weight: 600; }
.att-strip__week--green, .att-strip__day--done, .att-strip__day--holiday { background: #dcf5e6; color: #0b6b34; border-color: #a4dcb9; }
.att-strip__week--blue { background: #dbe9ff; color: #1b4f9c; border-color: #a9c7f5; }
.att-strip__week--red, .att-strip__day--missed { background: #fde0dc; color: #a3251b; border-color: #f2aaa2; }
.att-strip__week--future, .att-strip__day--future, .att-strip__day--outside { background: #f1eff5; color: #8a8496; opacity: .55; cursor: not-allowed; }
.att-strip__week--current { box-shadow: 0 0 0 3px #4c167a inset; }
.att-strip__week.is-selected, .att-strip__day.is-selected { outline: 3px solid #4c167a; outline-offset: 2px; }
.att-strip__day.is-today::after { content: "today"; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.att-key--green { background: #a4dcb9; } .att-key--blue { background: #a9c7f5; } .att-key--red { background: #f2aaa2; } .att-key--future { background: #d9d5e0; }
.att-cell--holiday { background: #eef3ff; color: #1b4f9c; font-size: 11px; font-weight: 600; }
.att-status--present { background: #dcf5e6; color: #0b6b34; }
.att-status--absent { background: #fde0dc; color: #a3251b; }
.att-toggle { min-width: 92px; font-weight: 700; border: 0; }
.att-toggle--present { background: #0f8a43; color: #fff; }
.att-toggle--absent { background: #c0281b; color: #fff; }
.att-holiday-note { background: #eef3ff; }
.att-holidays-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.att-toggle--present:hover, .att-toggle--present:focus { background: #0f8a43; color: #fff; filter: brightness(1.08); }
.att-toggle--absent:hover, .att-toggle--absent:focus { background: #c0281b; color: #fff; filter: brightness(1.08); }
label[hidden] { display: none !important; }

/* Profile-photo auto-shrink notice (assets/js/app.js) */
.photo-shrink-note { margin: 6px 0 0; color: var(--purple-800); }
.photo-shrink-note--error { color: #b42318; font-weight: 600; }

/* Save this setting? — pop-up (assets/js/result-setting-scope.js) */
html.scope-modal-open { overflow: hidden; }
.scope-modal {
    width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 18px;
    background: #fff; color: inherit; box-shadow: 0 30px 80px rgba(36, 17, 63, 0.35); overflow: auto;
}
.scope-modal::backdrop { background: rgba(36, 17, 63, 0.55); }
.scope-modal .scope-dialog { margin: 0; border: 0; box-shadow: none; border-radius: 0; position: relative; }
.scope-dialog__close {
    display: none; border: 0; background: transparent; font-size: 28px; line-height: 1; width: 40px; height: 40px; border-radius: 10px;
    color: var(--purple-800); cursor: pointer; flex: 0 0 auto;
}
.scope-modal .scope-dialog__close { display: inline-flex; align-items: center; justify-content: center; }
.scope-dialog__close:hover, .scope-dialog__close:focus-visible { background: var(--purple-100); }
.scope-dialog__choices { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .scope-dialog__choices { grid-template-columns: 1fr 1fr; align-items: start; } }
.scope-dialog__live { display: grid; gap: 12px; transition: opacity .15s; }
.scope-dialog__live[aria-busy="true"] { opacity: .5; }
.scope-dialog__warning {
    padding: 12px 14px; border-radius: 10px; background: #fff6e0; border: 1px solid #f1cf7a; color: #5c3d00; line-height: 1.5;
}
.scope-dialog .staff-form-actions { position: sticky; bottom: 0; background: #fff; padding-top: 10px; }
.scope-modal .staff-radio { flex-wrap: wrap; }
.scope-modal .staff-radio > strong { white-space: nowrap; }
.scope-modal fieldset:last-child .staff-radio > .staff-hint { flex: 1 1 100%; margin: -6px 0 0 26px; }

/* Results overview filters: related filters grouped side by side, comfortably tall dropdowns. */
.result-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
.result-filters__group { padding: 16px; }
.result-filters select {
    width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #dcd8e4; border-radius: 10px;
    background-color: #fff; font: inherit; font-size: 14px; color: #24113f;
}
.result-filters select:focus-visible { outline: 3px solid var(--purple-600); outline-offset: 1px; }
.result-context { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.result-context label { display: grid; gap: 4px; font-size: 12px; color: #5f5969; }
.result-context select { min-height: 36px; padding: 0 10px; border: 1px solid #dcd8e4; border-radius: 8px; background-color: #fff; font: inherit; font-size: 13px; }
.result-filters--primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .result-filters--primary { grid-template-columns: minmax(0, 1fr); } }
.result-subject-groups { display: grid; gap: 20px; padding: 0 20px 20px; }
.result-subject-group h3 { margin: 0 0 10px; font-size: 14px; color: #24113f; }
.result-subject-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.result-subject-button { min-width: 64px; justify-content: center; }
/* Phase 6 — approved and published read differently at a glance (the title and label name the status). */
.result-subject-button--approved { box-shadow: inset 0 -3px 0 var(--blue-700, #1767b0); }
.result-subject-button--published { box-shadow: inset 0 -3px 0 var(--success, #13734f); }

/* Registration forms: related fields grouped into cards, three across on wide screens. */
.reg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .reg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .reg-cards { grid-template-columns: minmax(0, 1fr); } }
.staff-portal .staff-form .reg-card,
.reg-card {
    min-width: 0; margin: 0; padding: 20px 22px 22px; display: grid; gap: 14px; align-content: start;
    border: 1px solid var(--panel-border, #e4dcf1); border-top: 4px solid var(--purple-600); border-radius: 14px;
    background: #fff; box-shadow: 0 1px 3px rgba(36, 17, 63, 0.07);
}
.staff-portal .staff-form .reg-card > legend,
.reg-card > legend { float: left; width: 100%; margin: 0 0 2px; padding: 0 0 10px; border-bottom: 1px solid var(--purple-100); }
.reg-card > legend + * { clear: both; }
.reg-card .staff-hint, .reg-card small { margin: 0; }
.reg-card .staff-subgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.reg-card .staff-subgrid > label:first-child { grid-column: 1 / -1; }
.reg-card input[data-id-preview] { font-weight: 700; letter-spacing: .02em; color: var(--purple-800); }
.reg-card input[data-id-preview].is-placeholder { font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }

/* Exams: "choose a new password first" notice */
.exams-steps { margin: 0 0 18px; padding-left: 1.2rem; display: grid; gap: 8px; color: var(--ink); line-height: 1.5; }

/* Handwriting font for typed report-card signatures (Alex Brush, SIL OFL; see assets/fonts). */
@font-face { font-family: "Alex Brush"; src: url("../fonts/AlexBrush-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Mobile-friendly tables: sticky first column + the conduct comment list ---------- */

/* Opt-in utility: the row-header column (Student, usually) stays pinned to the left edge while
   the rest of a wide table scrolls sideways underneath it, so you never lose track of whose row
   you're editing. Only the FIRST cell of each row is pinned — every other column scrolls. */
.staff-table-wrap--sticky-col table th:first-child,
.staff-table-wrap--sticky-col table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
}
.staff-table-wrap--sticky-col table thead th:first-child {
    z-index: 2;
    background: #faf9fc;
}
.staff-table-wrap--sticky-col table tbody tr:nth-child(even) th:first-child,
.staff-table-wrap--sticky-col table tbody tr:nth-child(even) td:first-child {
    background: #faf7fd;
}

/* Opt-in utility for long entry grids: the column headings stay frozen at the top while you scroll
   down the students. A heading can only stay put inside the box that scrolls, so the wrapper scrolls
   both ways and is about one screen tall (the page scrolls on past it as usual). Combined with
   --sticky-col, the Student column stays pinned on the left as well and the top-left heading sits
   above both. */
.staff-table-wrap--sticky-head {
    /* The box itself docks just under the app header while its card is on screen, so its
       headings can never slip up behind the header when the page stops part-way. */
    position: sticky;
    top: calc(var(--sx-header, 0px) + 8px);
    max-height: 85vh;
    max-height: calc(100dvh - var(--sx-header, 0px) - 16px);
    overflow: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.staff-table-wrap--sticky-head table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #faf9fc;
    /* Collapsed borders do not travel with a sticky cell, so the heading draws its own rule. */
    box-shadow: inset 0 -1px 0 #e4e0eb;
}
.staff-table-wrap--sticky-head.staff-table-wrap--sticky-col table thead th:first-child {
    left: 0;
    z-index: 3;
}
/* A card that clips its content (overflow: hidden) would stop the box above from docking. */
.staff-table-card.staff-table-card--sticky-grid,
.staff-table-card:has(> .staff-table-wrap--sticky-head),
.staff-table-card:has(> form > .staff-table-wrap--sticky-head) { overflow: visible; }

/* ---------- Result Settings (character-conduct.php): Classes / Character & Conduct / Signature Text ---------- */

.result-settings-tabs { margin-bottom: 20px; }
.result-settings-class-head { margin-bottom: 16px; }
.result-settings-class-head .staff-card-head { gap: 12px; flex-wrap: wrap; }
.result-settings-class-head .staff-card-head > div { min-width: 0; }
.result-settings-class-head h2 { overflow-wrap: anywhere; }
.result-settings-hint { margin: 0; padding: 16px 26px 12px; }
.result-settings-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.result-settings-classes th[scope="row"] { overflow-wrap: anywhere; }
.result-settings-pager { padding: 16px 26px 20px; }
.result-settings-pager__status { color: #706a7b; font-size: 12px; font-weight: 700; }
.result-settings-remark { width: 100%; min-width: 220px; padding: 8px 10px; border: 1px solid #dcd8e4; border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; }

.result-settings-signature { display: grid; gap: 12px; max-width: 560px; padding: 20px 26px 24px; }
.result-settings-signature__preview { margin: 0; min-height: 48px; color: #1b3a6b; font-family: "Alex Brush", cursive; font-size: 34px; line-height: 1.3; overflow-wrap: anywhere; }
.result-settings-signature__form { display: grid; gap: 12px; }
.result-settings-signature__form label { display: grid; gap: 7px; color: #3c3748; font-size: 12px; font-weight: 800; }
.result-settings-signature__form input[type="text"] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #dcd8e4; border-radius: 9px; font: inherit; font-size: 16px; background: #fff; }

/* Character & Conduct: each student is its own <tbody> — the conduct row, then that student's
   comment row directly beneath it (one cell spanning every column). The two rows read as one
   block: no rule between them, one rule after the comment. */
.conduct-entry-table .conduct-student-row > th,
.conduct-entry-table .conduct-student-row > td { border-bottom: 0; padding-bottom: 8px; vertical-align: top; }
.conduct-entry-table .conduct-student-row > th { min-width: 160px; max-width: 220px; overflow-wrap: break-word; }
.conduct-entry-table .conduct-comment-row > td { padding-top: 0; padding-bottom: 16px; border-bottom: 1px solid #e4e0eb; }
.conduct-entry-table tbody.conduct-student:nth-of-type(even) > tr > th,
.conduct-entry-table tbody.conduct-student:nth-of-type(even) > tr > td { background: #faf7fd; }
/* The comment cell spans the whole (scrolling) table, so it must NOT take the sticky first-column
   treatment; instead its field sticks to the left edge, staying in view while the grades scroll. */
.staff-table-wrap--sticky-col .conduct-entry-table .conduct-comment-row > td:first-child { position: static; z-index: auto; }
.conduct-entry-table tbody.conduct-student:nth-of-type(odd) > tr > th:first-child,
.conduct-entry-table tbody.conduct-student:nth-of-type(odd) > .conduct-comment-row > td { background: #fff; }
.conduct-comment-field {
    position: sticky;
    left: 26px;
    display: grid;
    gap: 4px;
    /* ~65 characters wide on a desktop (the saved limit is 60); never wider than the visible strip
       of the table on a phone, so the whole box stays on screen while the grade columns scroll. */
    width: min(65ch, calc(100vw - 96px));
    font-size: 13px;
}
/* The scroll wrapper is a size container, so the box is sized to the strip of the table that is
   actually visible (cqw), whatever the page gutters around it are. */
.conduct-table-wrap { container-type: inline-size; }
@supports (width: 1cqw) {
    .conduct-comment-field { width: min(65ch, calc(100cqw - 52px)); }
}
.conduct-comment-field__label { color: #756f82; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.conduct-comment-field__text { min-width: 0; color: #4b4458; font-size: 13px; overflow-wrap: anywhere; }
.conduct-entry-table input.conduct-comment-input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #dcd8e4;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    background: #fff;
}
.conduct-entry-table input.conduct-comment-input:focus { border-color: #6a1b9a; outline: 3px solid #6a1b9a2e; }

/* The shared suggestion list for the comment combobox (assets/js/conduct-comment-combobox.js).
   Fixed to the viewport so the table's scroll container never clips it and it never widens the page. */
.comment-suggestions {
    position: fixed;
    z-index: 60;
    margin: 0;
    padding: 4px;
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid #ddd5e7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px #29144c26;
}
.comment-suggestions[hidden] { display: none; }
.comment-suggestions li {
    padding: 10px 12px;
    border-radius: 7px;
    color: #241a36;
    font-size: 13px;
    line-height: 1.35;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.comment-suggestions li[aria-selected="true"],
.comment-suggestions li:hover { background: #f1eafa; color: #3b176d; }
.comment-suggestions li[aria-selected="true"] { box-shadow: inset 3px 0 0 #6a1b9a; }
.comment-suggestions mark { padding: 0; color: inherit; background: none; font-weight: 800; }

@media (max-width: 600px) {
    .conduct-entry-table .conduct-student-row > th { min-width: 118px; max-width: 140px; }
    .result-settings-hint { padding: 14px 18px 10px; }
    .result-settings-pager { padding: 14px 18px 18px; }
    .result-settings-signature { padding: 18px; }
    .conduct-comment-field { left: 18px; width: calc(100vw - 80px); }
    @supports (width: 1cqw) {
        .conduct-comment-field { width: calc(100cqw - 36px); }
    }
    .conduct-entry-table input.conduct-comment-input { font-size: 16px; min-height: 44px; }
}

/* ---------- Staff portal on a phone: headers and controls (≤600px only; desktop is unchanged) ----------
   Wide tables already scroll inside .staff-table-wrap; these rules stop the things AROUND them from
   being squeezed or clipped: a card header's title, count badge and action buttons wrap onto a new
   line instead of shrinking into the card's overflow:hidden edge, and form controls use 16px text so
   iOS Safari does not zoom the whole page when one is focused. */
@media (max-width: 600px) {
    .staff-card-head,
    .staff-card-head__actions,
    .admissions-editor__items-head,
    .student-cbt-runtime__header,
    .cbt-builder-actions { flex-wrap: wrap; gap: 10px 12px; }
    .staff-card-head > * { min-width: 0; }
    .staff-card-head h2,
    .staff-page-head h1 { overflow-wrap: break-word; }
    .staff-card-head .button,
    .staff-card-head__actions .button,
    .staff-count--text { white-space: nowrap; }
    .staff-portal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    .staff-portal select,
    .staff-portal textarea,
    .staff-portal .staff-main select:not([multiple]),
    .staff-portal .staff-main textarea:not([disabled]) { font-size: 16px; }
}

/* Result Sheet — a score cell below its own 40% threshold prints red (per cell, never from the total). */
.result-entry-table td.result-score-low{color:#b42318;font-weight:600}
.result-entry-table input.result-score-input.result-score-low{color:#b42318;border-color:#d92d20;background:#fef3f2}
.result-entry-table input.result-score-input{text-align:right}

/* ---------- Compact settings rows (reusable) -------------------------------------------------------------
   Related SHORT controls share a row instead of each taking a full-width row of its own. Put the fields that
   belong together in one .compact-form-grid; as many as fit side by side at >= 220px each, the rest wrap, and on
   a phone it is one column. Keep long titles, comments, notes and tables outside a grid (they stay full width).
   .compact-form-stack is the vertical rhythm of a card body that holds several rows. */
.compact-form-stack { display: grid; gap: 16px; padding: 20px; }
.compact-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 12px 16px;
    align-items: start;
}
.compact-form-grid > * { min-width: 0; }
.compact-form-note { display: grid; gap: 7px; align-content: start; }
.compact-form-note__label { color: var(--ink); font-size: 15px; font-weight: 600; }
.compact-form-note small { display: block; color: var(--ink-soft); font-size: 10px; font-weight: 500; line-height: 1.4; }
.compact-signature-preview { color: #1b3a6b; font-family: "Alex Brush", cursive; font-size: 18px; }
@media (max-width: 600px) {
    .compact-form-stack { padding: 16px; }
}

/* ---------- Principal's comment on the full Student Result (Phase 3) -------------------------------------
   One card inside the Student Result: predefined comment, custom comment, Save, then the Student navigation row.
   Everything wraps (no horizontal overflow) from desktop to a phone; the result table above keeps its own scroll. */
.principal-comment .compact-form-stack label { display: grid; gap: 7px; min-width: 0; color: #3c3748; font-size: 12px; font-weight: 800; }
.principal-comment .compact-form-stack select,
.principal-comment .compact-form-stack textarea { box-sizing: border-box; width: 100%; max-width: 100%; border: 1px solid #dcd8e4; border-radius: 9px; background: #fff; font: inherit; font-weight: 400; }
.principal-comment .compact-form-stack select { min-height: 44px; padding: 0 12px; }
.principal-comment .compact-form-stack textarea { min-height: 84px; padding: 10px 12px; resize: vertical; }
.principal-comment .staff-card-head { flex-wrap: wrap; gap: 8px 16px; }
.principal-comment-nav { align-items: center; margin-top: 4px; }
.principal-comment-nav .staff-hint { white-space: nowrap; }
@media (max-width: 600px) {
    .principal-comment-nav a { flex: 1 1 100%; text-align: center; }
    .principal-comment .staff-form-actions .button { width: 100%; }
}
.principal-comment .compact-form-stack small { font-weight: 400; color: #706a7b; }
/* Phase E — Principal Comment autosave status, top student bar and the Report Card link on the Student Result. */
.result-save-state[hidden], .result-save-detail[hidden], .principal-comment .staff-form-actions[hidden] { display: none; }
.principal-comment .compact-form-stack > label { margin-bottom: -4px; }
.principal-comment .result-save-state { justify-self: start; }
.principal-comment .result-save-detail { margin: 0; color: #a23b35; font-weight: 700; }
.principal-comment textarea[aria-invalid="true"] { border-color: #a23b35; }
.principal-comment-nav--top { margin: 0 0 12px; }
.student-result-report-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; }
@media (max-width: 600px) { .student-result-report-card .button { width: 100%; text-align: center; } }

/* ---------- Results Home and Class Workspace (Result UX redesign, Phase A) ---------------------------------
   Class-first entry to Results: Session/Term context -> status tiles -> class cards -> class workspace.
   Built from the existing staff card / badge / button / subnav classes. Everything wraps; nothing here can make the
   page scroll sideways at phone width (the result score tables keep their own .staff-table-wrap scroll). */
.result-home__context-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 18px 26px; }
.result-home__context-form label { display: grid; gap: 6px; min-width: 0; color: #3c3748; font-size: 12px; font-weight: 800; }
.result-home__context-form select { box-sizing: border-box; min-width: 200px; max-width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #dcd8e4; border-radius: 10px; background-color: #fff; color: #24113f; font: inherit; font-size: 14px; font-weight: 400; }
.result-home__context-form select:focus-visible { outline: 3px solid var(--purple-600, #6a1b9a); outline-offset: 1px; }
.result-home__hint { margin: 0; padding: 0 26px 18px; }
.result-home__context { margin-bottom: 18px; }
.result-home__tiles-section { margin-bottom: 22px; }
.result-home__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.result-home__tile { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #e4e0eb; border-left-width: 4px; border-radius: 12px; background: #fff; }
.result-home__tile strong { color: #4c167a; font-family: Manrope, sans-serif; font-size: 24px; line-height: 1.1; }
.result-home__tile span { color: #5f5969; font-size: 12px; font-weight: 700; }
.result-home__tile--not-started { border-left-color: #b7791f; }
.result-home__tile--submitted { border-left-color: #5b21b6; }
.result-home__tile--needs-correction { border-left-color: #a23b35; }
.result-home__tile--approved { border-left-color: #1767b0; }
.result-home__tile--published { border-left-color: #13734f; }
.result-home__classes h2, .result-class__rows h3 { margin: 0; }
.result-home__classes > h2 { margin-bottom: 12px; font-size: 20px; }
.result-home__class-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 10px; max-width: 520px; margin: 0; padding: 0; list-style: none; }
.result-home__class-button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 56px; padding: 8px 12px; border: 1px solid #ddd5e7; border-radius: 12px; background: #fff; color: #4c167a; font-family: Manrope, sans-serif; font-size: 18px; font-weight: 800; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.result-home__class-button:hover { border-color: #6a1b9a; background: #f6f1fb; }
.result-home__class-button:focus-visible { outline: 3px solid var(--purple-600, #6a1b9a); outline-offset: 2px; }
.result-home__tools { margin-top: 24px; padding: 4px 22px; }
.result-home__tools summary { padding: 14px 0; color: #4c167a; font-size: 14px; font-weight: 800; cursor: pointer; }
.result-home__tools summary:focus-visible { outline: 3px solid var(--purple-600, #6a1b9a); outline-offset: 2px; border-radius: 6px; }
.result-home__tools ul { display: grid; gap: 10px; margin: 0; padding: 0 0 16px; list-style: none; }
.result-home__tools li { display: grid; gap: 2px; }
.result-home__tools li span { color: #706a7b; font-size: 12px; }
.result-crumbs { margin-bottom: 14px; }
.result-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.result-crumbs li + li::before { content: "/"; margin-right: 8px; color: #9a94a6; }
.result-crumbs a { color: #4c167a; font-weight: 700; }
.result-crumbs [aria-current="page"] { color: #24113f; font-weight: 800; overflow-wrap: anywhere; }
.result-class__head { align-items: flex-start; }
.result-class__sections { margin-bottom: 16px; }
.result-class__overview-body { padding: 18px 26px 6px; font-size: 14px; }
.result-class__overview-body p { margin: 0 0 12px; }
.result-class__actions { padding: 6px 26px 22px; }
.result-class__actions h3 { margin: 6px 0 10px; font-size: 15px; }
.result-class__actions ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.result-class__actions li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.result-class__actions li span { color: #706a7b; font-size: 12px; }
.result-class__rows { margin: 0; padding: 0; list-style: none; }
.result-class__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 26px; border-bottom: 1px solid #eeeaf3; }
.result-class__row:last-child { border-bottom: 0; }
.result-class__row-main { min-width: 0; flex: 1 1 220px; }
.result-class__row-main h3 { font-size: 16px; color: #24113f; overflow-wrap: anywhere; }
.result-class__row-main h3 small { color: #706a7b; font-weight: 600; }
.result-class__row-main p { margin: 3px 0 0; color: #5f5969; font-size: 13px; overflow-wrap: anywhere; }
.result-class__row-side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.result-back { margin: 0 0 12px; font-size: 13px; }
.result-back a { color: #4c167a; font-weight: 700; }
@media (max-width: 900px) { .result-home__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .result-home__context-form { padding: 16px; }
    .result-home__context-form label, .result-home__context-form select, .result-home__context-form .button { width: 100%; }
    .result-home__hint { padding: 0 16px 16px; }
    .result-home__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .result-class__row { padding: 14px 16px; }
    .result-class__row-side { width: 100%; justify-content: space-between; }
    .result-class__overview-body, .result-class__actions { padding-left: 16px; padding-right: 16px; }
    .result-class__actions li .button { width: 100%; justify-content: center; }
}

/* ---------- Teacher workspace and score autosave (Result UX redesign, Phase B) ------------------------------
   "My classes" (class -> subject -> score sheet) and the compact save indicator on the score sheet. The indicator
   always carries an icon AND words, so its state never depends on colour. The wide score table keeps its own
   horizontal scroll (.staff-table-wrap); nothing here makes the page scroll sideways. */
.result-my-classes__groups { display: grid; gap: 18px; padding: 4px 26px 22px; }
.result-my-classes__group h3 { margin: 0 0 8px; color: #24113f; font-size: 17px; overflow-wrap: anywhere; }
.result-my-classes__group h3 small { margin-left: 6px; color: #706a7b; font-size: 12px; font-weight: 700; }
.result-my-classes__subjects { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.result-my-classes__subjects li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border: 1px solid #e4e0eb; border-radius: 12px; background: #fff; }
.result-my-classes__subject { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.result-my-classes__authority { display: block; color: #706a7b; font-size: 12px; }
.result-sheet-head h2 { overflow-wrap: anywhere; }
.result-save-bar { flex-wrap: wrap; position: sticky; top: calc(var(--sx-header, 0px) + 8px); z-index: 5; align-items: center; padding: 8px 0; background: #fff; }
.result-save-bar ~ .staff-table-wrap--sticky-head { top: calc(var(--sx-header, 0px) + 60px); max-height: calc(100dvh - var(--sx-header, 0px) - 68px); }
.result-save-state { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-width: 12.5rem; padding: 8px 12px; border: 1px solid #e4e0eb; border-radius: 999px; background: #faf8fd; color: #4c167a; font-size: 12px; font-weight: 700; }
.result-save-state__icon { display: inline-block; min-width: 1em; text-align: center; font-weight: 800; }
.result-save-state[data-save-state="saved"] { color: #13734f; border-color: #bfe3d3; background: #f1faf6; }
.result-save-state[data-save-state="failed"], .result-save-state[data-save-state="invalid"] { color: #a23b35; border-color: #efc2be; background: #fdf3f2; }
.result-save-state .button[hidden] { display: none; }
.result-save-hint { margin: 0 0 10px; }
.result-save-bar:has(.result-save-detail:not([hidden])) ~ .staff-table-wrap--sticky-head { top: calc(var(--sx-header, 0px) + 108px); max-height: calc(100dvh - var(--sx-header, 0px) - 116px); }
.result-save-detail { flex: 1 1 100%; margin: 0; padding: 8px 12px; border-left: 4px solid #a23b35; border-radius: 6px; background: #fdf3f2; color: #7a1f1a; font-size: 13px; }
.result-save-detail[hidden], .result-submit-form[hidden] { display: none; }
.result-entry-table input[aria-invalid="true"] { border-color: #d92d20; background: #fef3f2; }
@media (max-width: 700px) { .result-my-classes__groups { padding: 4px 16px 18px; } .result-my-classes__subject { flex-basis: 100%; } }

/* ---------- Administrator Class Control Center (Result UX redesign, Phase C) ---------------------------------
   One card on the Class Workspace: status, the server's readiness verdict, the actions that fit the class's state,
   and a quiet "Bulk and advanced actions" disclosure. Every status and verdict carries words AND a glyph, never
   colour alone. Stacks on a phone; the Return dialog is a native <dialog>. */
.result-control { margin-bottom: 18px; padding-bottom: 20px; }
.result-control__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding: 22px 26px 8px; }
.result-control__head h2 { margin: 0; color: #24113f; font-size: 22px; overflow-wrap: anywhere; }
.result-control__period { margin: 4px 0 0; color: #5f5969; font-size: 14px; }
.result-control__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Teacher "Submit All for Review" (Class Workspace) and the score-sheet row a missing-score link jumps to. */
.result-bulk-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 26px; border-bottom: 1px solid #eeeaf3; background: #faf8fd; }
.result-bulk-submit__form { margin: 0; }
.result-bulk-submit .staff-hint { flex: 1 1 260px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.result-bulk-submit-report { margin: 12px 0; }
.result-bulk-submit-report ul { margin: 6px 0 0; padding-left: 20px; }
.result-bulk-submit-report__subjects > li { margin-bottom: 12px; }
.result-entry-table tr:target > th, .result-entry-table tr:target > td { background: #fff4d6; }
@media (max-width: 640px) { .result-bulk-submit { padding: 14px 16px; } }
.result-control .result-batch-report { margin: 8px 26px 0; }
.result-control__body { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; padding: 12px 26px 4px; }
.result-control__readiness { flex: 2 1 280px; min-width: 0; padding: 16px 18px; border: 1px solid #e4e0eb; border-radius: 12px; background: #faf8fd; }
.result-control__readiness h3 { margin: 0 0 8px; color: #24113f; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.result-control__lines { display: grid; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; color: #3c3748; font-size: 14px; }
.result-control__verdict { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; }
.result-control__verdict--ready { color: #13734f; }
.result-control__verdict--not-ready { color: #8a5a00; }
.result-control__blockers { display: grid; gap: 4px; margin: 10px 0 0; padding: 0 0 0 18px; color: #5f5969; font-size: 13px; overflow-wrap: anywhere; }
.result-control__facts { display: flex; flex: 1 1 160px; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 16px 4px; align-content: flex-start; }
.result-control__facts div { display: grid; gap: 2px; min-width: 80px; }
.result-control__facts dt { color: #706a7b; font-size: 12px; font-weight: 700; }
.result-control__facts dd { margin: 0; color: #24113f; font-size: 18px; font-weight: 800; }
.result-control__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 26px 0; }
.result-control__form { margin: 0; }
.result-control__note { margin: 10px 26px 0; color: #5f5969; font-size: 13px; }
.result-control__advanced { margin: 14px 26px 0; border-top: 1px solid #eeeaf3; }
.result-control__advanced summary { padding: 12px 0 6px; color: #4c167a; font-size: 14px; font-weight: 800; cursor: pointer; }
.result-control__advanced summary:focus-visible { outline: 3px solid var(--purple-600, #6a1b9a); outline-offset: 2px; border-radius: 6px; }
.result-control__advanced ul { display: grid; gap: 10px; margin: 0; padding: 4px 0 6px; list-style: none; }
.result-control__advanced li { display: grid; gap: 2px; }
.result-control__advanced li span { color: #706a7b; font-size: 12px; }
.result-control__dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 22px 24px; border: 1px solid #cfc7dd; border-radius: 14px; color: #24113f; }
.result-control__dialog::backdrop { background: rgba(36, 17, 63, .55); }
.result-control__dialog h2 { margin: 0 0 8px; font-size: 19px; overflow-wrap: anywhere; }
.result-control__dialog textarea { width: 100%; min-height: 96px; box-sizing: border-box; }
.result-control__dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.result-control__error { min-height: 1.3em; margin: 6px 0 0; color: #a23b35; font-size: 13px; font-weight: 700; }
.result-control__reason { color: #8a5a00; }
.result-class__ready { font-size: 12px; font-weight: 800; }
.result-class__ready--yes { color: #13734f; }
.result-class__ready--no { color: #8a5a00; }
@media (max-width: 600px) {
    .result-control__head, .result-control__body, .result-control__actions { padding-left: 16px; padding-right: 16px; }
    .result-control .result-batch-report, .result-control__note, .result-control__advanced { margin-left: 16px; margin-right: 16px; }
    .result-control__actions .button, .result-control__form, .result-control__form .button { width: 100%; justify-content: center; text-align: center; }
    .result-control__dialog-actions .button { flex: 1 1 100%; justify-content: center; }
}

/* Result UX redesign, Phase D - Result Settings (/result-overview?tab=settings): one page, five areas.
   Reuses the portal's card, form and context-bar styles; only what is specific to the settings page is added here. */
.result-settings__head { margin-bottom: 14px; }
.result-settings__context { margin-bottom: 14px; }
.result-settings__nav { margin: 0 0 18px; }
.result-settings__nav ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.result-settings__nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid #ddd5e7; border-radius: 999px; color: #4c167a; background: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
.result-settings__nav a:hover { background: #f6f1fb; }
.result-settings__nav a:focus-visible { outline: 3px solid var(--purple-600, #6a1b9a); outline-offset: 2px; }
.result-settings__nav-arrow { display: none; }
.result-settings__section { margin-bottom: 20px; scroll-margin-top: 16px; }
.result-settings__section .staff-card-head { align-items: flex-start; }
.result-settings__purpose { margin: 4px 0 0; color: #706a7b; font-size: 13px; }
.result-settings__body { display: grid; gap: 14px; padding: 20px 26px 24px; }
.result-settings__feedback:empty { display: none; }
.result-settings__feedback { padding: 14px 26px 0; }
.result-settings__feedback .staff-alert { margin: 0; border-radius: 10px; }
.result-settings__feedback .staff-alert--danger { border-left: 4px solid #a23b35; }
.result-settings__feedback .staff-alert:focus-visible { outline: 3px solid var(--purple-600, #6a1b9a); outline-offset: 2px; }
.result-settings__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.result-settings__grid label, .result-settings__body > label { display: grid; gap: 7px; color: #3c3748; font-size: 12px; font-weight: 800; }
.result-settings__total { margin: 0; padding: 12px 14px; border: 1px solid #e4e0eb; border-radius: 10px; background: #faf9fc; color: #3c3748; font-size: 14px; }
.result-settings__total strong { color: #4c167a; font-family: Manrope, sans-serif; font-size: 20px; }
.result-settings__total small { display: block; margin-top: 4px; color: #706a7b; font-size: 12px; font-weight: 500; }
.result-settings__row-actions { margin-top: 12px; }
.result-settings__seeded { border: 1px solid #e4e0eb; border-radius: 10px; margin-bottom: 14px; }
.result-settings__school { display: grid; gap: 8px; }
.result-settings__item { border-top: 1px solid #eeeaf3; scroll-margin-top: 16px; }
.result-settings__item:first-of-type { border-top: 0; }
.result-settings__item > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-height: 44px; padding: 10px 2px; cursor: pointer; }
.result-settings__item > summary:focus-visible { outline: 3px solid var(--purple-600, #6a1b9a); outline-offset: 2px; }
.result-settings__item-name { color: #24113f; font-size: 15px; font-weight: 800; }
.result-settings__item .staff-form { padding: 6px 0 16px; }
.result-settings__manage { display: grid; gap: 14px; padding: 6px 0 16px; }
.result-settings__inline { display: inline; }
.result-settings__add-sample input[type="text"] { min-width: min(420px, 100%); }
.result-home__settings-link { align-self: center; }
@media (max-width: 600px) {
    .result-settings__nav ul { flex-direction: column; gap: 0; border: 1px solid #e4e0eb; border-radius: 12px; overflow: hidden; background: #fff; }
    .result-settings__nav li + li { border-top: 1px solid #eeeaf3; }
    .result-settings__nav a { display: flex; justify-content: space-between; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 0; font-size: 14px; }
    .result-settings__nav-arrow { display: inline; font-size: 20px; line-height: 1; }
    .result-settings__body { padding: 16px; }
    .result-settings__feedback { padding: 12px 16px 0; }
    .result-settings__add-sample input[type="text"] { min-width: 0; width: 100%; }
    .result-home__settings-link { width: 100%; justify-content: center; text-align: center; }
}

/* Result UX Phase G — the family Results pages stack a child chooser, the latest-result card, the term list and the result table; they
   share the 18px rhythm every other staff / portal card stack has (the cards used to touch). */
.staff-portal .student-latest-result,
.staff-portal .student-record-filters,
.staff-portal .record-context-list { margin-bottom: 18px; }
.staff-portal .student-latest-result .student-record-actions { margin-bottom: 0; padding-bottom: 20px; }

/* Class staff (Phase 1) — a class can have several Class Teachers and Assistant Class Teachers. Each class is one
   card with the two roles side by side, stacked on narrow screens; the Add form sits under the people it adds to. */
.staff-portal .class-staff-card { margin-bottom: 18px; }
.staff-portal .class-staff-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.staff-portal .class-staff-group { padding: 22px 26px; min-width: 0; }
.staff-portal .class-staff-group + .class-staff-group { border-left: 1px solid #eeeaf3; }
.staff-portal .class-staff-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.staff-portal .class-staff-list { display: grid; margin: 0 0 16px; padding: 0; list-style: none; }
.staff-portal .class-staff-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eeeaf3; font-size: 13px; }
.staff-portal .class-staff-group > .result-unentered { margin: 0 0 16px; }
.staff-portal .class-staff-add label { display: block; margin-bottom: 6px; color: #3c3748; font-size: 12px; font-weight: 800; }
.staff-portal .class-staff-add__row { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-portal .class-staff-add__row select { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #dcd8e4; border-radius: 9px; background: #fff; }
.staff-portal .class-staff-add__row select[aria-invalid="true"] { border-color: var(--danger); }
.staff-portal .class-staff-add__error { margin: 8px 0 0; color: var(--danger); font-size: 12px; font-weight: 700; }
@media (max-width: 760px) {
    .staff-portal .class-staff-groups { grid-template-columns: 1fr; }
    .staff-portal .class-staff-group { padding: 18px; }
    .staff-portal .class-staff-group + .class-staff-group { border-top: 1px solid #eeeaf3; border-left: 0; }
}

/* Score history (class staff Phase 4) - read-only list of recorded score changes. Phones: the shell turns this simple table
   into labelled cards (shell-v2.js adds .sx-cards; the When cell, a row header, becomes the card title), so no column is hidden. */
.staff-portal .result-history-context { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; font-size: 15px; }
.staff-portal .result-history-card + .result-history-card, .staff-portal .result-history-card + .staff-table-card { margin-top: 16px; }
.staff-portal .result-history-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 22px; margin: 0; padding: 20px 26px; }
.staff-portal .result-history-facts dt { color: var(--ink-soft, #756f82); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.staff-portal .result-history-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.staff-portal .result-history-table { min-width: 560px; }
.staff-portal .result-history-table th[scope="row"] { font-weight: 600; }
.staff-portal .result-history-table .result-history-field { font-weight: 700; }
.staff-portal .result-history-table time { white-space: nowrap; }
.staff-portal .result-history-note { padding: 14px 26px 18px; color: var(--ink-soft, #706a7b); font-size: 12.5px; }
.staff-portal .result-history-card a:focus-visible { outline: 2px solid #6a1b9a; outline-offset: 2px; }
@media (max-width: 700px) {
    .staff-portal .result-history-facts { padding: 16px 18px; }
    .staff-portal .result-history-note { padding: 12px 18px 16px; }
}