/* ExamNexus AI design tokens (P-18, 6 Oct 2026): plum surfaces, one coral action, kōwhai gold to
   notice, paper to read. tests/test_design_system.py checks each text colour's contrast (WCAG AA). */
:root {
    /* Brand */
    --genz-plum: #1E1B3A;            /* the top bar, the start page, the promises band */
    --genz-plum-deep: #15132B;
    --genz-action: #FF7A59;          /* the one primary action on a screen (E3) */
    --genz-action-hover: #FF8F73;
    --genz-action-text: #1E1B3A;
    --genz-gold: #F5B544;            /* the thing to notice: a target, the current page */
    --genz-violet: #8B7CF6;          /* progress, secondary accents */

    /* Page */
    --genz-bg: #F7F6FB;              /* paper */
    --genz-primary: #5B4BC9;         /* links, secondary buttons, focus: 5.9:1 on paper */
    --genz-primary-hover: #4839B0;
    --genz-secondary: #8B7CF6;
    --genz-accent: #FF7A59;
    --genz-success: #2E9E5B;
    --genz-warning: #F5B544;
    /* Status colours that read (17 Oct): text on paper, and the ink on each solid fill; Bootstrap's map here. */
    --genz-danger: #B42318;
    --genz-danger-solid: #B42318;
    --genz-on-danger: #FFFFFF;
    --genz-success-text: #166B44;
    --genz-success-solid: #166B44;
    --genz-success-tint: #DCEFE5;
    --genz-on-success: #FFFFFF;
    --genz-warning-text: #8A5A00;
    --genz-check-solid: #8A5A00;
    --genz-on-check: #FFFFFF;
    --genz-code: #9B1F5C;
    --genz-on-primary: #FFFFFF;
    --genz-on-violet: #1E1B3A;

    /* Text */
    --genz-dark: #1E1B3A;            /* headings */
    --genz-text: #2A2740;
    --genz-text-muted: #5E5C72;      /* 6.0:1 on paper */
    --genz-text-inverse: #ffffff;

    /* Surfaces */
    --genz-card-bg: #FFFFFF;
    --genz-surface: #FFFFFF;
    --genz-surface-hover: #F1EFF9;

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #DAD8E6;
    --input-focus-bg: #ffffff;

    /* Borders and shadows */
    --glass-border: 1px solid rgba(30, 27, 58, 0.09);
    --glass-shadow: 0 6px 24px -14px rgba(30, 27, 58, 0.25);
    --card-shadow: 0 14px 36px -18px rgba(30, 27, 58, 0.35);

    /* The top bar: plum in both themes */
    --nav-bg: #1E1B3A;
    --nav-text: #FFFFFF;
    --nav-border: 1px solid rgba(255, 255, 255, 0.08);
    --dropdown-bg: #FFFFFF;
    --dropdown-hover-bg: rgba(91, 75, 201, 0.10);

    /* Misc */
    --font-primary: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --border-radius-lg: 24px;
    --border-radius-md: 18px;
    --border-radius-sm: 12px;
    --radius-pill: 999px;
    --progress-track: #E6E4F0;

    /* A warm glow at the top of the page, the start page's in miniature */
    --genz-bg-image:
        radial-gradient(50rem 22rem at 90% -10%, rgba(255, 122, 89, 0.10), transparent 60%),
        radial-gradient(40rem 20rem at 5% -5%, rgba(108, 93, 211, 0.12), transparent 60%);
}

[data-theme="dark"] {
    --genz-bg: #15132B;
    --genz-primary: #B3A8FF;         /* 8.6:1 on the dark page */
    --genz-primary-hover: #C9C1FF;
    --genz-secondary: #8B7CF6;
    --genz-accent: #FF8F73;
    --genz-success: #5AC55E;
    --genz-warning: #F5B544;
    --genz-danger: #FF8A7A;
    --genz-danger-solid: #FF8A7A;
    --genz-on-danger: #1E1B3A;
    --genz-success-text: #7FD8A8;
    --genz-success-solid: #5AC55E;
    --genz-success-tint: #1F3B3A;
    --genz-on-success: #1E1B3A;
    --genz-warning-text: #F5B544;
    --genz-check-solid: #8A5E0A;
    --genz-on-check: #FFFFFF;
    --genz-code: #F49AC1;
    --genz-on-primary: #1E1B3A;

    --genz-dark: #FFFFFF;
    --genz-text: #F3F5F9;
    --genz-text-muted: #B5B3C9;
    --genz-text-inverse: #1E1B3A;

    --genz-card-bg: #1E1B3A;
    --genz-surface: #1E1B3A;
    --genz-surface-hover: #292650;

    --input-bg: #1A1733;
    --input-border: #3A3660;
    --input-focus-bg: #1E1B3A;

    --glass-border: 1px solid rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
    --card-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.6);

    --nav-bg: #15132B;
    --nav-text: #FFFFFF;
    --nav-border: 1px solid rgba(255, 255, 255, 0.08);
    --dropdown-bg: #1E1B3A;
    --dropdown-hover-bg: rgba(179, 168, 255, 0.14);

    --progress-track: rgba(255, 255, 255, 0.12);
    --genz-bg-image:
        radial-gradient(50rem 22rem at 90% -10%, rgba(255, 122, 89, 0.16), transparent 60%),
        radial-gradient(40rem 20rem at 5% -5%, rgba(108, 93, 211, 0.28), transparent 60%);
}

/* Bootstrap takes the brand: its primary, links and focus are the page's. */
:root, [data-theme="dark"] {
    --bs-primary: var(--genz-primary);
    --bs-link-color: var(--genz-primary);
    --bs-link-hover-color: var(--genz-primary-hover);
    --bs-body-color: var(--genz-text);
    --bs-body-bg: var(--genz-bg);
    --bs-border-color: #DAD8E6;
    --bs-secondary-color: var(--genz-text-muted);
}
/* The chart legends and marks on /progress use Bootstrap's green and orange. */
:root { --bs-success: #166B44; --bs-orange: #B04426; }
[data-theme="dark"] { --bs-success: #7FD8A8; --bs-orange: #FF8F73; }
:root { --bs-primary-rgb: 91, 75, 201; --bs-link-color-rgb: 91, 75, 201; --bs-link-hover-color-rgb: 72, 57, 176; }
[data-theme="dark"] { --bs-primary-rgb: 179, 168, 255; --bs-link-color-rgb: 179, 168, 255; --bs-link-hover-color-rgb: 201, 193, 255; --bs-border-color: #3A3660; }

/* Utilities the templates lean on */
.text-muted { color: var(--genz-text-muted) !important; }
.text-dark, .text-heading { color: var(--genz-dark) !important; }
.text-body { color: var(--genz-text) !important; }
.text-primary { color: var(--genz-primary) !important; }
.text-bg-primary { background-color: var(--genz-primary) !important; color: var(--genz-on-primary) !important; }
.bg-light { background-color: var(--genz-surface-hover) !important; }
.bg-white, .bg-surface { background-color: var(--genz-surface) !important; color: var(--genz-text) !important; }
.bg-surface-hover { background-color: var(--genz-surface-hover) !important; color: var(--genz-text) !important; }
.bg-primary { background-color: var(--genz-primary) !important; }
.bg-secondary { background-color: var(--genz-text-muted) !important; }
.bg-warning { background-color: var(--genz-gold) !important; color: var(--genz-plum) !important; }
.bg-success { background-color: var(--genz-success) !important; }
.border { border-color: var(--bs-border-color) !important; }
.pagination { --bs-pagination-color: var(--genz-primary); --bs-pagination-active-bg: var(--genz-primary); --bs-pagination-active-border-color: var(--genz-primary); --bs-pagination-active-color: var(--genz-on-primary); }
.text-gradient {
    color: var(--genz-dark);
    background: linear-gradient(135deg, var(--genz-dark) 0%, var(--genz-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Bootstrap's own blues, reds and greens as borders: the brand's instead, and
   the old dashboard's coloured left edges become one quiet violet. */
.border-primary { border-color: var(--genz-primary) !important; }
.border-info { border-color: var(--genz-violet) !important; }
.border-success { border-color: var(--genz-success) !important; }
.border-danger { border-color: #D9534F !important; }
.border-warning { border-color: var(--genz-gold) !important; }
.text-info { color: var(--genz-violet) !important; }
.text-success { color: var(--genz-success-text) !important; }
.text-danger, .link-danger { color: var(--genz-danger) !important; }
.text-warning, .text-warning-emphasis { color: var(--genz-warning-text) !important; }
code { color: var(--genz-code); }
.btn-outline-danger { --bs-btn-color: var(--genz-danger); --bs-btn-border-color: var(--genz-danger); --bs-btn-hover-bg: var(--genz-danger-solid); --bs-btn-hover-border-color: var(--genz-danger-solid); --bs-btn-hover-color: var(--genz-on-danger); --bs-btn-active-bg: var(--genz-danger-solid); --bs-btn-active-border-color: var(--genz-danger-solid); --bs-btn-active-color: var(--genz-on-danger); --bs-btn-disabled-color: var(--genz-danger); --bs-btn-disabled-border-color: var(--genz-danger); }
.btn-danger { --bs-btn-bg: var(--genz-danger-solid); --bs-btn-border-color: var(--genz-danger-solid); --bs-btn-color: var(--genz-on-danger); --bs-btn-hover-bg: var(--genz-danger); --bs-btn-hover-border-color: var(--genz-danger); --bs-btn-hover-color: var(--genz-on-danger); }
/* Bootstrap's light table head stays light in the dark theme unless told. */
[data-theme="dark"] .table-light { --bs-table-bg: var(--genz-surface-hover); --bs-table-color: var(--genz-text); --bs-table-border-color: #3A3660; }
.glass-panel.border-start { border-left-color: var(--genz-violet) !important; }
.list-group-item.active {
    background-color: var(--genz-primary);
    border-color: var(--genz-primary);
    color: var(--genz-text-inverse);       /* white on violet; plum on the dark theme's pale violet */
}
.list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--genz-surface-hover); color: var(--genz-text); }

/* Cards: paper, a hairline border and a soft plum shadow. Nothing jumps on hover. */
.card {
    background-color: var(--genz-card-bg);
    border: var(--glass-border);
    border-radius: var(--border-radius-md);
    color: var(--genz-text);
}
.glass-panel {
    background: var(--genz-card-bg);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--border-radius-lg);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.glass-card {
    background: var(--genz-card-bg);
    border-radius: var(--border-radius-md);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}
.glass-card:hover { box-shadow: var(--card-shadow); }
.list-group-item { background-color: transparent; color: var(--genz-text); border-color: var(--bs-border-color); }
.list-group-item-primary {
    --bs-list-group-color: var(--genz-dark);
    --bs-list-group-bg: rgba(var(--bs-primary-rgb), 0.10);
    --bs-list-group-border-color: rgba(var(--bs-primary-rgb), 0.35);
}

/* Alerts and flashes: a tint and a coloured edge, never a loud box. */
.alert { border: 0; border-left: 4px solid var(--genz-primary); border-radius: var(--border-radius-sm); color: var(--genz-text); background: var(--genz-surface); box-shadow: var(--glass-shadow); }
.alert-info { border-left-color: var(--genz-violet); background: rgba(139, 124, 246, 0.10); }
.alert-warning { border-left-color: var(--genz-gold); background: rgba(245, 181, 68, 0.14); }
.alert-success { border-left-color: var(--genz-success); background: rgba(46, 158, 91, 0.10); }
.alert-danger { border-left-color: #D9534F; background: rgba(217, 83, 79, 0.10); }
.alert-light { border-left-color: var(--genz-primary); }
.alert .alert-link { color: var(--genz-primary); }

/* The top bar: plum on every page, white items, gold for where you are. */
.navbar-custom {
    background: var(--nav-bg) !important;
    border-bottom: var(--nav-border);
    padding: 0.7rem 0;
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.5);
}
.navbar-nav { list-style: none; padding-left: 0; margin-bottom: 0; display: flex; flex-direction: column; }
.navbar-nav .nav-item { list-style: none; }
@media (min-width: 992px) { .navbar-nav { flex-direction: row; align-items: center; } }
.navbar-brand {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--nav-text) !important;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.navbar-brand span.icon { font-size: 1.2em; }
.navbar-brand-name { font-size: 1.35rem; letter-spacing: 0.5px; white-space: nowrap; }
/* 18 Oct: the brand never pushes the menu button to a second row, at any text size or width */
@media (max-width: 991.98px) {
    .navbar-brand { min-width: 0; flex: 1 1 0; }
    .navbar-brand-name { font-size: min(1.35rem, 5.4vw); overflow: hidden; text-overflow: ellipsis; }
}
.navbar-custom .nav-link {
    color: var(--nav-text) !important;
    font-weight: 600;
    padding: 0.55rem 1.1rem !important;
    border-radius: var(--radius-pill);
    opacity: 0.88;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.navbar-custom .nav-link:hover, .navbar-custom .nav-link:focus-visible { background-color: rgba(255, 255, 255, 0.10); opacity: 1; }
.navbar-custom .nav-link.active { background-color: rgba(255, 255, 255, 0.12); color: var(--genz-gold) !important; opacity: 1; }
.navbar-custom .navbar-toggler { border-color: rgba(255, 255, 255, 0.35); }
.navbar-custom .navbar-toggler-icon { filter: invert(1); }
.navbar-custom :focus-visible { outline-color: var(--genz-gold); }
.navbar-custom .btn-outline-primary, .navbar-custom .btn-link { color: var(--nav-text); border-color: rgba(255, 255, 255, 0.4); }

/* Menus that drop from the bar sit on the page's surface, not the bar's plum. */
.dropdown-menu {
    list-style: none;
    padding: 0.5rem;
    background: var(--dropdown-bg) !important;
    border: var(--glass-border) !important;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--card-shadow);
}
.dropdown-item { color: var(--genz-text) !important; font-weight: 500; border-radius: 8px; padding: 0.5rem 1rem; transition: background-color 0.2s ease; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--dropdown-hover-bg) !important; color: var(--genz-primary) !important; }
.dropdown-menu .btn-outline-primary { color: var(--genz-primary); border-color: var(--genz-primary); }
.dropdown-menu .btn-outline-primary.active { background: var(--genz-primary); color: var(--genz-on-primary); }

/* Buttons: the primary action is coral and pill-shaped; everything else is quiet. */
.btn { border-radius: var(--radius-pill); font-weight: 600; }
.btn-genz-primary, .btn-primary {
    --bs-btn-bg: var(--genz-action);
    --bs-btn-border-color: var(--genz-action);
    --bs-btn-color: var(--genz-action-text);
    --bs-btn-hover-bg: var(--genz-action-hover);
    --bs-btn-hover-border-color: var(--genz-action-hover);
    --bs-btn-hover-color: var(--genz-action-text);
    --bs-btn-active-bg: var(--genz-action-hover);
    --bs-btn-active-border-color: var(--genz-action-hover);
    --bs-btn-active-color: var(--genz-action-text);
    --bs-btn-disabled-bg: var(--genz-action);
    --bs-btn-disabled-border-color: var(--genz-action);
    --bs-btn-disabled-color: var(--genz-action-text);
    background: var(--genz-action);
    border: 1px solid var(--genz-action);
    color: var(--genz-action-text);
    font-weight: 700;
    padding: 0.7rem 1.6rem;
    border-radius: var(--radius-pill);
    box-shadow: 0 12px 24px -14px rgba(255, 122, 89, 0.9);
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-genz-primary:hover, .btn-primary:hover, .btn-genz-primary:focus-visible, .btn-primary:focus-visible {
    background: var(--genz-action-hover);
    border-color: var(--genz-action-hover);
    color: var(--genz-action-text);
    transform: translateY(-1px);
}
.btn-genz-primary.btn-sm, .btn-primary.btn-sm { padding: 0.35rem 0.9rem; font-size: 0.875rem; }
.btn-genz-primary.btn-lg, .btn-primary.btn-lg { padding: 0.9rem 1.9rem; font-size: 1.1rem; }
.btn-genz-outline, .btn-outline-primary {
    --bs-btn-color: var(--genz-primary);
    --bs-btn-border-color: var(--genz-primary);
    --bs-btn-hover-bg: var(--genz-primary);
    --bs-btn-hover-border-color: var(--genz-primary);
    --bs-btn-hover-color: var(--genz-on-primary);
    --bs-btn-active-bg: var(--genz-primary);
    --bs-btn-active-border-color: var(--genz-primary);
    --bs-btn-active-color: var(--genz-on-primary);
    --bs-btn-disabled-color: var(--genz-primary);
    --bs-btn-disabled-border-color: var(--genz-primary);
    background: transparent;
    border: 1.5px solid var(--genz-primary);
    color: var(--genz-primary);
    font-weight: 600;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-pill);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-genz-outline:hover, .btn-genz-outline:focus-visible { background: var(--genz-primary); color: var(--genz-on-primary); border-color: var(--genz-primary); }
.btn-genz-outline.btn-sm { padding: 0.3rem 0.85rem; font-size: 0.875rem; }
[data-theme="dark"] .btn-genz-outline:hover, [data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary.active { color: var(--genz-plum); }
.btn-outline-secondary { --bs-btn-color: var(--genz-text-muted); --bs-btn-border-color: var(--input-border); --bs-btn-hover-bg: var(--genz-surface-hover); --bs-btn-hover-color: var(--genz-dark); --bs-btn-hover-border-color: var(--input-border); --bs-btn-active-bg: var(--genz-surface-hover); --bs-btn-active-color: var(--genz-dark); }
.btn-link { color: var(--genz-primary); text-decoration: none; }
.btn-link:hover { color: var(--genz-primary-hover); text-decoration: underline; }
.btn-success { --bs-btn-bg: var(--genz-success); --bs-btn-border-color: var(--genz-success); --bs-btn-hover-bg: #27884E; --bs-btn-hover-border-color: #27884E; }
.form-check-input:checked { background-color: var(--genz-primary); border-color: var(--genz-primary); }
.form-control, .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--genz-text); border-radius: var(--border-radius-sm); }
.form-control:focus, .form-select:focus { background-color: var(--input-focus-bg); border-color: var(--genz-primary); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.18); color: var(--genz-text); }
.form-control::placeholder { color: var(--genz-text-muted); opacity: 0.8; }

/* The footer: deep plum, like the start page's last band. */
.footer-genz {
    margin-top: auto;
    padding: 2.5rem 0 2rem;
    background: var(--genz-plum-deep);
    color: rgba(255, 255, 255, 0.72);
    border-top: 0;
}
.footer-genz .fw-bold { color: var(--genz-gold); }
.footer-genz a, .footer-genz a.text-muted { color: rgba(255, 255, 255, 0.8) !important; }
.footer-genz a:hover { color: #fff !important; }

/* Self-hosted fonts — SIL OFL 1.1 (no external CDN). Licenses in static/fonts/plus-jakarta-sans/ */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('../fonts/plus-jakarta-sans/PlusJakartaSans-Variable-latin.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('../fonts/plus-jakarta-sans/PlusJakartaSans-Variable-latin-ext.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* Reset and base */
body {
    font-family: var(--font-primary);
    background-color: var(--genz-bg);
    color: var(--genz-text);
    background-image: var(--genz-bg-image);
    background-size: 100% 60vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--genz-dark);
    font-weight: 700;
    letter-spacing: -0.02em;
}
a {
    text-decoration: none;
    color: var(--genz-primary);
    transition: color 0.2s ease;
}
a:hover { color: var(--genz-primary-hover); }

/* Table Overrides */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--genz-text);
    --bs-table-border-color: rgba(255, 255, 255, 0.1);
}

.table th, .table td {
    color: var(--genz-text) !important;
    border-color: var(--glass-border) !important;
}

.table thead th {
    color: var(--genz-text-muted) !important;
    border-bottom: 2px solid var(--glass-border) !important;
    font-size: 0.85rem;
    font-weight: 600;
}

/* A question's own table (C-13): headings as written, so a variable n or a unit mL keeps its case */
.ct-table thead th {
    text-transform: none;
    letter-spacing: normal;
}

[data-theme="light"] .table {
    --bs-table-border-color: #e9ecef;
}

/* Forms */
.form-control-genz {
    background-color: var(--input-bg);
    border: 2px solid var(--input-border);
    padding: 14px 16px;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    transition: all 0.2s ease;
    color: var(--genz-text);
}

.form-control-genz::placeholder {
    color: var(--genz-text-muted);
    opacity: 0.8;
}

.form-control-genz:focus {
    background-color: var(--input-focus-bg);
    border-color: var(--genz-primary);
    box-shadow: 0 0 0 4px rgba(108, 93, 211, 0.15);
    outline: none;
    color: var(--genz-text);
}

.form-label {
    color: var(--genz-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Badges & Progress */
.badge-genz {
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.85rem;
}

.progress-genz {
    height: 10px;
    border-radius: 10px;
    background-color: var(--progress-track);
    overflow: hidden;
}

.progress-bar-genz {
    background: linear-gradient(90deg, var(--genz-violet) 0%, var(--genz-action) 70%, var(--genz-gold) 100%);
    border-radius: 10px;
}

/* ==========
   P-16 (design review): guides as pages, tap rows
   ========== */
/* A learning guide or exam tips, formatted (services/content_render.render_guide). */
.guide { max-width: 46rem; line-height: 1.65; }
.guide > :first-child { margin-top: 0; }
.guide > :last-child { margin-bottom: 0; }
.guide .guide-h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.75rem; }
.guide .guide-h3 { font-size: 1.15rem; font-weight: 700; margin: 1.75rem 0 0.5rem; }
.guide .guide-h4, .guide .guide-h5, .guide .guide-h6 { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 0.4rem; }
.guide p, .guide ul, .guide ol { margin-bottom: 0.85rem; }
.guide li { margin-bottom: 0.25rem; }
.guide li > ul, .guide li > ol { margin: 0.25rem 0 0; }
.guide table { width: 100% !important; background: var(--genz-surface); margin-bottom: 1rem; }
.guide .guide-quote { border-left: 4px solid rgba(var(--bs-primary-rgb), 0.45); padding: 0.25rem 0 0.25rem 1rem; margin: 0 0 0.85rem; }
.guide hr { margin: 1.25rem 0; opacity: 0.15; }
@media (max-width: 575.98px) { .guide table { display: block; overflow-x: auto; } }

/* Quick check: each option is a full row to tap (it was 24px high on a phone). */
.quick-check-option { min-height: 44px; padding: 0.35rem 0.5rem; border-radius: 0.5rem; cursor: pointer; }
.quick-check-option:hover { background: var(--dropdown-hover-bg); }

/* The answer box keeps Submit on a laptop screen without scrolling. */
.workspace #responseBox { height: clamp(12rem, 45vh, 26rem); }

/* The question page as a writing desk (12 Oct): question card, steps, lined answer, attempts as cards. */
:root{--paper-line:rgba(91,75,201,0.12);--paper-margin:rgba(255,122,89,0.35);--q-line-h:2rem}
[data-theme="dark"]{--paper-line:rgba(179,168,255,0.12);--paper-margin:rgba(255,143,115,0.30)}

.q-card{position:relative;background:var(--genz-card-bg);border:var(--glass-border);border-radius:var(--border-radius-md);
 box-shadow:var(--glass-shadow);padding:1.25rem 1.5rem 1.35rem 1.75rem;overflow:hidden}
.q-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;
 background:linear-gradient(180deg,var(--genz-violet),var(--genz-action))}
.q-eyebrow{font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--genz-primary);margin-bottom:0.35rem}
.q-stem{font-size:1.15rem;font-weight:600;line-height:1.5;color:var(--genz-dark)}

.q-steps{list-style:none;display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem;padding:0;margin:0 0 1rem}
.q-step{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;color:var(--genz-text-muted)}
.q-step-n{flex:none;display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;
 font-size:0.8rem;font-weight:700;background:var(--genz-surface-hover);color:var(--genz-primary)}
.q-step.is-now{color:var(--genz-dark);font-weight:600}
.q-step.is-now .q-step-n{background:var(--genz-action);color:var(--genz-action-text)}

.answer-card{background:var(--genz-card-bg);border:var(--glass-border);border-radius:var(--border-radius-md);
 box-shadow:var(--card-shadow);overflow:hidden}
.answer-card:focus-within{border-color:var(--genz-primary)}
.answer-label{display:block;padding:0.9rem 1.5rem 0;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;
 text-transform:uppercase;color:var(--genz-text-muted)}
.workspace .answer-paper{display:block;width:100%;border:0;resize:vertical;outline:none;color:var(--genz-text);
 font-size:1.02rem;line-height:var(--q-line-h);padding:0.25rem 1.5rem 1rem 2.25rem;
 background-color:transparent;background-attachment:local;
 background-image:
 linear-gradient(90deg,transparent 1.5rem,var(--paper-margin) 1.5rem,var(--paper-margin) calc(1.5rem + 1px),transparent calc(1.5rem + 1px)),
 repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--q-line-h) - 1px),var(--paper-line) calc(var(--q-line-h) - 1px),var(--paper-line) var(--q-line-h));
 background-position:0 0.25rem}
.workspace .answer-paper::placeholder{color:var(--genz-text-muted);opacity:0.8}

/* "Ask your tutor" (12 Oct, rule 3.9): a warm chat, honest about being an AI. */
.tutor-panel{background:var(--genz-bg);color:var(--genz-text)}
.tutor-head{background:var(--genz-card-bg);border-bottom:var(--glass-border)}
.tutor-avatar{flex:none;display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;
 background:linear-gradient(135deg,var(--genz-violet),var(--genz-action));color:#fff;font-size:1.15rem}
.tutor-sub{font-size:0.82rem;color:var(--genz-text-muted)}
.tutor-log{display:flex;flex-direction:column;gap:0.5rem;padding:0.25rem 0.1rem}
.tutor-msg{display:flex}
.tutor-msg.is-student{justify-content:flex-end}
.tutor-bubble{max-width:88%;padding:0.6rem 0.85rem;border-radius:1.1rem;font-size:0.93rem;line-height:1.45;
 white-space:pre-wrap;overflow-wrap:anywhere}
.tutor-msg.is-tutor .tutor-bubble{background:var(--genz-card-bg);border:var(--glass-border);border-bottom-left-radius:0.35rem;
 box-shadow:var(--glass-shadow);color:var(--genz-text)}
.tutor-msg.is-student .tutor-bubble{background:var(--genz-primary);color:var(--genz-text-inverse);border-bottom-right-radius:0.35rem}
[data-theme="dark"] .tutor-msg.is-student .tutor-bubble{color:#1E1B3A}
/* 19 Oct: the AI is thinking (tutor, feedback, plan) */
.thinking-dots{display:inline-flex;gap:.3rem;align-items:center;height:1.45em;vertical-align:middle}
.thinking-dots i{width:.45rem;height:.45rem;border-radius:50%;background:currentColor;opacity:.35;animation:thinking 1.2s ease-in-out infinite}
.thinking-dots i:nth-child(2){animation-delay:.15s}.thinking-dots i:nth-child(3){animation-delay:.3s}
@keyframes thinking{40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){.thinking-dots i{animation:none;opacity:.6}}
.tutor-starters{display:flex;flex-wrap:wrap;gap:0.4rem;margin:0.15rem 0 0.25rem}
.tutor-starter{border:1px solid var(--genz-primary);color:var(--genz-primary);background:transparent;border-radius:var(--radius-pill);
 padding:0.35rem 0.8rem;font-size:0.85rem;min-height:44px}
.tutor-starter:hover,.tutor-starter:focus-visible{background:var(--dropdown-hover-bg)}
.tutor-nudge{margin-bottom:0.5rem;padding:0.6rem 0.8rem;border-radius:var(--border-radius-sm);font-size:0.88rem;
 background:rgba(245,181,68,0.16);border-left:4px solid var(--genz-gold);color:var(--genz-text)}
.tutor-form{display:flex;gap:0.5rem;align-items:flex-end}
.tutor-form textarea{resize:none}
.tutor-form .btn{white-space:nowrap}
[data-theme="dark"] .tutor-panel .btn-close{filter:invert(1) grayscale(1) brightness(2)}
.tutor-foot{margin-top:0.6rem;font-size:0.8rem;color:var(--genz-text-muted)}
.answer-card:focus-within .answer-label{color:var(--genz-primary)}

.answer-bar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:0.5rem 1rem;padding:0.75rem 1rem 0.75rem 1.5rem;border-top:var(--glass-border);
 background:var(--genz-surface-hover)}
.answer-meta{display:flex;flex-wrap:wrap;gap:0.25rem 1rem;align-items:baseline;font-size:0.9rem;color:var(--genz-text-muted)}
.answer-words #wordCount{font-weight:700;color:var(--genz-dark)}
.answer-clock{font-weight:600;color:var(--genz-dark)}
.answer-actions{display:flex;flex-wrap:wrap;gap:0.5rem;margin-left:auto}

.attempt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(10rem, 100%),1fr));gap:0.75rem}
.attempt-card{display:flex;flex-direction:column;gap:0.15rem;padding:0.75rem 0.9rem;border-radius:var(--border-radius-sm);
 background:var(--genz-card-bg);border:var(--glass-border);box-shadow:var(--glass-shadow);
 text-decoration:none;color:var(--genz-text)}
.attempt-card:hover,.attempt-card:focus-visible{background:var(--genz-surface-hover);border-color:var(--genz-primary)}
.attempt-date{font-weight:700;color:var(--genz-primary)}
.attempt-line{font-size:0.85rem;color:var(--genz-text-muted)}

@media (max-width:575.98px){
 .q-card{padding:1rem 1rem 1.1rem 1.25rem}
 .q-stem{font-size:1.05rem}
 .answer-label{padding:0.8rem 1rem 0}
 .workspace .answer-paper{padding:0.25rem 1rem 1rem 1.5rem;
 background-image:repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--q-line-h) - 1px),var(--paper-line) calc(var(--q-line-h) - 1px),var(--paper-line) var(--q-line-h))}
 .answer-bar{padding:0.65rem 0.75rem}
 .answer-actions{width:100%}
 .answer-actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:no-preference){
    .attempt-card, .answer-card { transition: border-color 0.15s ease, background-color 0.15s ease; }
}

/* The start page (index.html, P-17): hero, audience band, promises; full-bleed inside main. */
/* The start page escapes main's container for full-bleed bands. */
html { overflow-x: clip; }
.lp-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }


/* Hero */
.lp-hero {
  margin-top: -1.5rem;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(255, 122, 89, 0.38), transparent 60%),
    radial-gradient(40rem 24rem at 10% 110%, rgba(108, 93, 211, 0.55), transparent 60%),
    var(--genz-plum);
  color: #fff;
  padding: 3.5rem 0 3rem;
}
.lp-hero .container { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
.lp-greeting { color: var(--genz-gold); font-weight: 600; font-size: 1.15rem; margin-bottom: 0.75rem; }
.lp-title {
  color: #fff; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  font-size: clamp(2.6rem, 5.6vw, 4.5rem); margin-bottom: 1.25rem;
}
.lp-title span { color: var(--genz-gold); }
.lp-lede { font-size: 1.2rem; line-height: 1.55; color: rgba(255, 255, 255, 0.86); max-width: 34rem; margin-bottom: 1.75rem; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.lp-btn {
  display: inline-block; font-weight: 700; padding: 0.9rem 1.8rem; border-radius: 999px;
  text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* !important: the dark theme's a:not(.btn):not(.nav-link):not(.dropdown-item) rule outranks any class here. */
.lp-btn-coral { background: var(--genz-action); color: #1E1B3A !important; box-shadow: 0 12px 28px -12px rgba(255, 122, 89, 0.8); }
.lp-btn-coral:hover, .lp-btn-coral:focus-visible { background: var(--genz-action-hover); transform: translateY(-1px); }
.lp-btn-ghost { color: #fff !important; border: 1.5px solid rgba(255, 255, 255, 0.45); }
.lp-btn-ghost:hover, .lp-btn-ghost:focus-visible { border-color: #fff; }
.lp-btn:focus-visible { outline: 3px solid var(--genz-gold); outline-offset: 3px; }
.lp-note { color: rgba(255, 255, 255, 0.72); margin: 1rem 0 0; }
.lp-proof { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.82); }
.lp-proof li { display: flex; align-items: center; gap: 0.5rem; }
.lp-proof i { color: var(--genz-gold); }

/* The grade path: the one bold element. */
.lp-path { position: relative; padding: 2.25rem 1.5rem 1.5rem; border-radius: 28px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); }
.lp-path-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3.6rem; }
.lp-path-head strong { font-size: 1.1rem; }
.lp-path-head span { color: rgba(255, 255, 255, 0.7); }
.lp-track { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); margin: 0 0.5rem; }
.lp-fill { position: absolute; inset: 0 auto 0 0; width: 66%; border-radius: 999px;
  background: linear-gradient(90deg, var(--genz-violet), var(--genz-action) 70%, var(--genz-gold)); transform-origin: left; }
.lp-stops { display: flex; justify-content: space-between; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.lp-stops li { position: relative; flex: 1; text-align: center; font-size: 0.95rem; color: rgba(255, 255, 255, 0.75); }
.lp-stops li:first-child { text-align: left; }
.lp-stops li:last-child { text-align: right; color: var(--genz-gold); font-weight: 700; }
.lp-stops li::before { content: ""; position: absolute; top: -1.45rem; left: 50%; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--genz-plum); border: 3px solid rgba(255, 255, 255, 0.5); }
.lp-stops li:first-child::before { left: 0.5rem; }
.lp-stops li:last-child::before { left: auto; right: 0.5rem; margin: 0; border-color: var(--genz-gold); background: var(--genz-gold); }
.lp-stops li.is-done::before { border-color: #fff; background: #fff; }
.lp-you { position: absolute; left: 66%; top: -2.9rem; transform: translateX(-50%); white-space: nowrap;
  background: #fff; color: var(--genz-plum); font-weight: 700; font-size: 0.9rem; padding: 0.3rem 0.7rem; border-radius: 999px; }
.lp-you::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
.lp-stops small { display: block; font-weight: 500; font-size: 0.8rem; color: rgba(245, 181, 68, 0.85); }
.lp-path-foot { margin: 2rem 0 0; color: rgba(255, 255, 255, 0.78); line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .lp-fill { animation: lp-grow 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }
  .lp-you { animation: lp-pop 0.5s ease 1.5s both; }
  @keyframes lp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes lp-pop { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* Students, teachers, schools: a paper band, three columns, no boxes. */
.lp-people { background: var(--genz-bg); color: var(--genz-dark); padding: 3.5rem 0 3rem; }
.lp-people h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); letter-spacing: -0.03em; margin-bottom: 2rem; }
/* Three columns whose rows line up whatever wraps: each column's parts sit on shared grid rows. */
.lp-cols { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; grid-auto-flow: column; column-gap: 2.5rem; }
.lp-col { display: contents; }
.lp-col h3 { font-size: 1.05rem; color: var(--genz-action); margin-bottom: 0.35rem; letter-spacing: 0; }
.lp-col .lp-claim { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 0.75rem; color: var(--genz-dark); }
.lp-col p { color: var(--genz-text-muted); line-height: 1.6; margin: 0; }

/* Promises and the pilot contact. */
.lp-promise { background: var(--genz-plum-deep); color: #fff; padding: 3rem 0; }
.lp-promise .container { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem 3rem; align-items: start; }
.lp-promise h2 { grid-column: 1 / -1; color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -0.03em; margin: 0 0 0.5rem; }
.lp-vows { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; margin: 0; padding: 0; list-style: none; }
.lp-vows strong { display: block; color: var(--genz-gold); margin-bottom: 0.2rem; }
.lp-vows li { color: rgba(255, 255, 255, 0.8); line-height: 1.5; }
.lp-pilot { border-left: 3px solid var(--genz-action); padding-left: 1.5rem; }
.lp-pilot h3 { color: #fff; font-size: 1.4rem; letter-spacing: -0.02em; }
.lp-pilot p { color: rgba(255, 255, 255, 0.8); }

@media (max-width: 991px) {
  .lp-hero .container, .lp-promise .container { grid-template-columns: 1fr; gap: 2.25rem; }
  .lp-cols { display: block; }
  .lp-col { display: block; margin-bottom: 2rem; }
  .lp-col:last-child { margin-bottom: 0; }
  .lp-hero { padding: 2.75rem 0 2.5rem; }
}
@media (max-width: 575px) {
  .lp-vows { grid-template-columns: 1fr; }
  .lp-path { padding: 2rem 1rem 1.25rem; }
  .lp-stops li { font-size: 0.8rem; }
}

/* The admin area (P-18): six cards naming their tools, then tool cards; navigation only, calm (E7). */
.admin-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.admin-icon {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    color: var(--genz-primary);
    background: linear-gradient(135deg, rgba(91, 75, 201, 0.14) 0%, rgba(255, 122, 89, 0.12) 100%);
}
.admin-lead { color: var(--genz-text-muted); max-width: 44rem; margin-bottom: 1.75rem; }
.admin-card {
    display: block; height: 100%; padding: 1.4rem 1.5rem; text-decoration: none; color: var(--genz-text);
    background: var(--genz-card-bg); border: var(--glass-border); border-radius: var(--border-radius-md);
    box-shadow: var(--glass-shadow); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-card:hover, .admin-card:focus-visible { border-color: var(--genz-primary); box-shadow: var(--card-shadow); color: var(--genz-text); }
.admin-card .admin-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 1.3rem; border-radius: 14px; margin-bottom: 1rem; }
.admin-card h2 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.admin-card p { color: var(--genz-text-muted); font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.9rem; }
.admin-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.admin-tool {
    height: 100%; padding: 1.1rem 1.25rem; background: var(--genz-card-bg); border: var(--glass-border);
    border-radius: var(--border-radius-md); box-shadow: var(--glass-shadow);
}
.admin-tool h2 { font-size: 1.02rem; margin-bottom: 0.25rem; }
.admin-tool h2 a { color: var(--genz-primary); }
.admin-tool p { color: var(--genz-text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.admin-tool.is-unbuilt { background: transparent; box-shadow: none; border-style: dashed; }
.admin-tool.is-unbuilt h2 { color: var(--genz-text-muted); }
.admin-count {
    display: inline-block; min-width: 1.6rem; padding: 0.05rem 0.5rem; margin-left: 0.4rem; text-align: center;
    font-size: 0.78rem; font-weight: 700; border-radius: var(--radius-pill);
    color: var(--genz-plum); background: var(--genz-gold);
}
.admin-soon { font-size: 0.72rem; font-weight: 600; margin-left: 0.4rem; color: var(--genz-text-muted); }
.admin-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-back { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.75rem; }
.admin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; padding-top: 0.25rem; }
.admin-stat { padding: 1rem 1.25rem; background: var(--genz-card-bg); border: var(--glass-border); border-radius: var(--border-radius-md); box-shadow: var(--glass-shadow); }
.admin-stat .label { font-size: 0.85rem; color: var(--genz-text-muted); margin-bottom: 0.15rem; }
.admin-stat .value { font-size: 1.6rem; font-weight: 700; color: var(--genz-dark); line-height: 1.2; }
.admin-card h2 a { color: var(--genz-dark); }
.admin-card h2 a:hover { color: var(--genz-primary); }
.admin-chips a { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); color: var(--genz-primary); background: rgba(var(--bs-primary-rgb), 0.10); }
.admin-chips a:hover, .admin-chips a:focus-visible { background: var(--genz-primary); color: #fff; }
[data-theme="dark"] .admin-chips a:hover { color: var(--genz-plum); }
.account-details { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin-top: 0.75rem; }
.account-details dt { font-weight: 600; color: var(--genz-text-muted); }
.account-details dd { margin: 0; color: var(--genz-dark); font-weight: 600; word-break: break-word; }
.role-chip { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); color: var(--genz-primary); background: rgba(var(--bs-primary-rgb), 0.10); }
.rename-user summary { list-style: none; }
.rename-user summary::-webkit-details-marker { display: none; }
.review-tally { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: baseline; color: var(--genz-text-muted); }
.review-tally strong { color: var(--genz-dark); font-size: 1.1rem; }
.review-tally .tally-waiting strong { color: var(--genz-plum); background: var(--genz-gold); padding: 0.05rem 0.55rem; border-radius: var(--radius-pill); }

/* The review page (P-17): the item read as a document, the decision in a sticky rail. */
.review-position { color: var(--genz-text-muted); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 1rem; }
.review-position a { font-weight: 600; }
.review-doc { background: var(--genz-card-bg); border: var(--glass-border); border-radius: var(--border-radius-md); box-shadow: var(--glass-shadow); padding: 1.75rem 2rem; }
.review-doc .guide { max-width: none; }
.review-doc h2.review-section { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--genz-text-muted); margin: 1.75rem 0 0.6rem; }
.review-doc h2.review-section:first-child { margin-top: 0; }
.review-details { display: grid; grid-template-columns: fit-content(16rem) minmax(0, 1fr); gap: 0.3rem 1rem; font-size: 0.9rem; margin: 0.75rem 0 0; }
.review-details dt { color: var(--genz-text-muted); font-weight: 600; overflow-wrap: anywhere; }
.review-details dd { margin: 0; overflow-wrap: anywhere; }
.review-details code { font-size: 0.85em; }
.review-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0.5rem 0 1rem; }
.review-grade { border-radius: var(--border-radius-sm); padding: 0.9rem 1rem; background: var(--genz-surface-hover); border-top: 4px solid var(--genz-violet); }
.review-grade.is-merit { border-top-color: var(--genz-action); }
.review-grade.is-excellence { border-top-color: var(--genz-gold); }
.review-grade h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.review-grade p { font-size: 0.92rem; line-height: 1.5; margin: 0; }
.review-panel { border-radius: var(--border-radius-sm); padding: 1rem 1.25rem; background: var(--genz-surface-hover); }
.review-stage { border: var(--glass-border); border-radius: var(--border-radius-sm); padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
.review-rail { position: sticky; top: 5.5rem; }
.review-rail .admin-tool { margin-bottom: 1rem; }
.review-rail h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.review-rail ul { padding-left: 1.1rem; margin-bottom: 0; font-size: 0.92rem; }
.review-rail li { margin-bottom: 0.25rem; }
.review-history { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.review-history li { padding: 0.35rem 0; border-top: var(--glass-border); }
.review-history li:first-child { border-top: 0; }
.review-decision textarea { resize: vertical; }
.review-doc pre { white-space: pre-wrap; word-break: break-word; background: var(--genz-surface-hover); border-radius: var(--border-radius-sm); padding: 1rem; font-size: 0.85rem; }
@media (max-width: 991px) { .review-rail { position: static; } .review-grades { grid-template-columns: 1fr; } }
.ct-text .katex-display { margin: 0.4em 0; }
.review-grades .katex, .table .katex, .review-rail .katex { font-size: 1em; }
/* Classes and schools (P-17 SA-B05): the school in numbers, one card per class. */
.school-summary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; margin-bottom: 1rem; color: var(--genz-text-muted); }
.school-summary span { font-weight: 600; }
.class-card { height: 100%; padding: 1.1rem 1.25rem; background: var(--genz-card-bg); border: var(--glass-border); border-radius: var(--border-radius-md); box-shadow: var(--glass-shadow); display: flex; flex-direction: column; gap: 0.9rem; }
.class-card.is-inactive { opacity: 0.6; background: transparent; box-shadow: none; border-style: dashed; }
.class-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.class-code { display: inline-block; font-weight: 800; color: var(--genz-primary); margin-right: 0.3rem; }
.class-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.class-figure { padding: 0.6rem 0.75rem; border-radius: var(--border-radius-sm); background: var(--genz-surface-hover); min-width: 0; }
.class-figure-n { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--genz-dark); }
.class-figure-label { font-size: 0.8rem; font-weight: 600; color: var(--genz-text-muted); }
.class-figure-names { font-size: 0.78rem; color: var(--genz-text-muted); margin-top: 0.25rem; overflow-wrap: anywhere; }
.class-ready { font-size: 0.9rem; color: var(--genz-text-muted); }
.class-ready i { color: var(--genz-gold); }
.class-ready.is-ready { color: var(--genz-success-text); font-weight: 600; }
.class-ready.is-ready i { color: var(--genz-success); }
@media (max-width: 575px) { .class-figures { grid-template-columns: 1fr; } }
/* Messages (P-17 SA-D02): a floating stack at the bottom right, in view wherever the page is scrolled. */
#flash-messages { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1080; width: min(26rem, calc(100vw - 2.5rem)); display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
#flash-messages .alert { pointer-events: auto; margin: 0; box-shadow: var(--card-shadow); border-left-width: 4px;
    background: var(--genz-surface); color: var(--genz-dark); font-weight: 500; }   /* solid: it floats over any page, light or dark */
#flash-messages .alert-success { border-left-color: var(--genz-success); }
#flash-messages .alert-danger { border-left-color: #E4635F; }
#flash-messages .alert-warning { border-left-color: var(--genz-gold); }
#flash-messages .alert-info { border-left-color: var(--genz-violet); }
#flash-messages .alert i { color: inherit; opacity: 0.85; }
[data-theme="dark"] #flash-messages .alert { background: #292650; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.8); }
[data-theme="dark"] #flash-messages .btn-close { filter: invert(1) grayscale(100%); }
#flash-messages:empty { display: none; }
/* The access log's filters (P-17 SA-D05): one row of selects, wrapping on a phone. */
.log-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.log-filters > div { min-width: 10rem; flex: 1 1 10rem; }
.log-filters .log-filters-actions { flex: 0 0 auto; display: flex; gap: 0.25rem; align-items: center; }
/* The access log's status badges (P-17 SA-D05): readable on the row tint in both themes. */
.badge-genz-success { background: var(--genz-success-solid); color: var(--genz-on-success); }
.badge-genz-danger { background: var(--genz-danger-solid); color: var(--genz-on-danger); }

/* T-02 class page (P-17 TE-A04): the class on one table, a standard per column;
   grade chips and bars toned by rank (fails muted; pass, merit, top step up). */
.class-page-figures { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); margin-bottom: 1.25rem; }
.class-table th { font-weight: 600; color: var(--genz-text-muted); font-size: 0.82rem; }
.class-table td { font-size: 0.92rem; }
.needs-cell { font-size: 0.85rem; max-width: 22rem; }
.grade-chip { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; line-height: 1.3; background: var(--genz-surface-hover); color: var(--genz-text-muted); white-space: nowrap; }
.grade-chip.is-fail { background: rgba(217, 83, 79, 0.14); color: #A8322E; }
.grade-chip.is-pass { background: rgba(94, 92, 230, 0.14); color: var(--genz-primary); }
.grade-chip.is-merit { background: rgba(255, 122, 89, 0.18); color: #A53E22; }
.grade-chip.is-top { background: rgba(245, 181, 68, 0.26); color: #6E4A00; }
[data-theme="dark"] .grade-chip.is-fail { color: #F4A5A1; }
[data-theme="dark"] .grade-chip.is-merit { color: #FFB39E; }
[data-theme="dark"] .grade-chip.is-top { color: #FFD98A; }
.grade-target { font-size: 0.76rem; color: var(--genz-text-muted); white-space: nowrap; margin-left: 0.2rem; }
.grade-bar { display: flex; height: 0.9rem; border-radius: 999px; overflow: hidden; background: var(--genz-surface-hover); }
.grade-bar span { display: block; height: 100%; }
.grade-bar .is-fail, .grade-legend .is-fail { background: #D9534F; }
.grade-bar .is-pass, .grade-legend .is-pass { background: var(--genz-primary); }
.grade-bar .is-merit, .grade-legend .is-merit { background: var(--genz-action); }
.grade-bar .is-top, .grade-legend .is-top { background: var(--genz-gold); }
.grade-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.82rem; color: var(--genz-text-muted); margin-top: 0.45rem; }
.grade-legend i { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 2px; margin-right: 0.3rem; vertical-align: -1px; background: var(--genz-surface-hover); border: 1px solid var(--genz-border, rgba(0,0,0,0.15)); }
.grade-legend i[class] { border: 0; }
.grade-legend strong { color: var(--genz-text); }
tr.is-needs td, tr.is-needs th { background: rgba(245, 181, 68, 0.16); }   /* a row that needs someone (a student, an open event), readable in both themes; never Bootstrap's table-warning */
/* The native calendar icon is drawn dark; in dark mode invert it so it reads on the dark field. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator, [data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.2); cursor: pointer; }

/* T-13 Library: standard cards, class chips, the how-it-works strip, sections with
   a guiding line, items with one action bar, the path as a step line. */
.lib-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.lib-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; line-height: 1.3; background: rgba(94, 92, 230, 0.14); color: var(--genz-primary); white-space: nowrap; margin: 0; }
.lib-chip.is-muted { background: var(--genz-surface-hover); color: var(--genz-text-muted); }
.lib-chip.is-on { background: var(--genz-success-tint); color: var(--genz-success-text); }
.lib-chip.is-picked { background: rgba(255, 122, 89, 0.18); color: #A53E22; }
.lib-chip.is-hidden { background: rgba(245, 181, 68, 0.24); color: #6E4A00; }
[data-theme="dark"] .lib-chip.is-picked { color: #FFB39E; }
[data-theme="dark"] .lib-chip.is-hidden { color: #FFD98A; }
.lib-chip-btn { border: 0; background: transparent; padding: 0 0 0 0.35rem; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.lib-lead { color: var(--genz-text-muted); font-size: 0.92rem; margin-bottom: 0.75rem; }
.lib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.lib-inline-form { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
.lib-report { display: inline-block; }
.lib-report summary { list-style: none; cursor: pointer; }
.lib-report summary::-webkit-details-marker { display: none; }
.lib-report-panel { margin-top: 0.5rem; padding: 0.9rem 1rem; max-width: 30rem; border-radius: var(--border-radius-md); background: var(--genz-card-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); font-size: 0.9rem; }

/* Rule 3.7: Bootstrap's own colours never reach a page; old Bootstrap classes take the project tones. */
.badge.bg-success, .badge.text-bg-success { background-color: var(--genz-success-solid) !important; color: var(--genz-on-success) !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: var(--genz-danger-solid) !important; color: var(--genz-on-danger) !important; }
.badge.bg-warning, .badge.text-bg-warning, .badge.bg-warning-subtle { background-color: rgba(245, 181, 68, 0.28) !important; color: var(--genz-dark) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-dark, .badge.bg-secondary-subtle, .badge.bg-light, .badge.text-bg-light { background-color: var(--genz-surface-hover) !important; color: var(--genz-text-muted) !important; border: 0 !important; }
.badge.bg-info, .badge.text-bg-info, .badge.bg-info-subtle { background-color: rgba(94, 92, 230, 0.14) !important; color: var(--genz-primary) !important; }
.badge.bg-primary, .badge.text-bg-primary, .badge.bg-success-subtle { background-color: rgba(94, 92, 230, 0.14) !important; color: var(--genz-primary) !important; }
.btn-outline-success, .btn-outline-warning, .btn-outline-info { --bs-btn-color: var(--genz-primary); --bs-btn-border-color: var(--genz-primary); --bs-btn-hover-bg: var(--genz-primary); --bs-btn-hover-border-color: var(--genz-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--genz-primary); --bs-btn-active-border-color: var(--genz-primary); border-radius: var(--radius-pill); font-weight: 600; }
.btn-secondary { --bs-btn-bg: var(--genz-surface-hover); --bs-btn-border-color: transparent; --bs-btn-color: var(--genz-text); --bs-btn-hover-bg: var(--genz-primary); --bs-btn-hover-color: #fff; border-radius: var(--radius-pill); font-weight: 600; }
.lib-chip.is-retired { background: rgba(217, 83, 79, 0.14); color: #A8322E; }
[data-theme="dark"] .lib-chip.is-retired { color: #F4A5A1; }
.alert-warning, .alert-success { border-left-width: 4px; }

/* The welcome band (10 Oct): the first run and Today. The school's colour when
   it has one, the site's plum otherwise; ink from services/school_identity. */
.fr-hero { margin-top: -1.5rem; margin-bottom: 0.5rem; padding: 1.4rem 0 1.25rem; color: #fff;
  background: radial-gradient(50rem 24rem at 90% -20%, rgba(255, 122, 89, 0.38), transparent 60%), radial-gradient(36rem 20rem at 5% 120%, rgba(108, 93, 211, 0.55), transparent 60%), var(--genz-plum); }
.fr-hero.has-colour { color: var(--school-ink, #fff); background: radial-gradient(50rem 24rem at 90% -20%, color-mix(in srgb, var(--school-ink, #fff) 18%, transparent), transparent 60%), linear-gradient(110deg, var(--school-colour), color-mix(in srgb, var(--school-colour) 78%, #000)); }
.fr-hero.is-compact { padding: 0.9rem 1.25rem; margin: 1rem 0 0; border-radius: var(--border-radius-lg, 14px); }
.fr-hero-row { display: flex; align-items: center; gap: 1.25rem; }
.fr-crest { height: 4.75rem; min-width: 4.75rem; max-width: 12rem; padding: 0.45rem; background: color-mix(in srgb, #fff 14%, transparent); border: 1px solid color-mix(in srgb, #fff 28%, transparent); box-shadow: none; }
.fr-hero.is-compact .fr-crest { height: 3.5rem; min-width: 3.5rem; max-width: 10rem; padding: 0.35rem; border-radius: 0.75rem; }
.fr-greeting { color: var(--genz-gold); font-weight: 700; font-size: 1rem; }
.fr-hero.has-colour .fr-greeting { color: var(--school-ink, #fff); }
.fr-school { font-weight: 500; opacity: 0.85; }
.fr-date { font-size: 0.95rem; opacity: 0.9; }
.fr-title { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0.15rem 0 0.4rem; color: inherit; }
.fr-lede { font-size: 0.98rem; line-height: 1.45; opacity: 0.9; max-width: 36rem; margin-bottom: 0.6rem; }
.fr-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-weight: 600; font-size: 0.92rem; opacity: 0.75; }
.fr-steps li { display: flex; align-items: center; gap: 0.5rem; }
.fr-steps li.is-current { opacity: 1; }
.fr-steps li.is-current .fr-step-n { background: var(--genz-gold); color: #1E1B3A; border-color: var(--genz-gold); }
.fr-hero.has-colour .fr-steps li.is-current .fr-step-n { background: var(--school-ink, #fff); color: var(--school-colour); border-color: var(--school-ink, #fff); }
.fr-steps li.is-done .fr-step-n { background: var(--genz-success); border-color: var(--genz-success); color: #fff; }
.fr-step-n { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.fr-fixed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.fr-card { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: var(--border-radius-md); background: var(--genz-card-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); }
.fr-card-going { display: block; }
.fr-card-going legend { float: left; width: 100%; font-size: 1rem; line-height: 1.3; }
.fr-going { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 0.75rem; }
.fr-tick { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--genz-success); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.subj-std > .bi { margin-right: 0.15em; }
.subj-num { white-space: nowrap; }
.fr-card-title { line-height: 1.3; }
.fr-missing { margin: 0.5rem 0 0; padding: 0.75rem 1rem; border-radius: var(--border-radius-md); background: var(--genz-surface-hover); }
.fr-missing summary { cursor: pointer; }
.fr-pick { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0; }
@media (max-width: 575.98px) {
  .fr-hero { padding: 1.5rem 0 1.25rem; }
  .fr-hero:not(.is-compact) .fr-hero-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .fr-crest { height: 3.5rem; min-width: 3.5rem; max-width: 9rem; padding: 0.3rem; }
  .fr-title { font-size: 1.5rem; }
  .fr-lede { font-size: 1rem; }
}

/* The student pages (10 Oct): one head, cards and tiles in the school's colour. */
.student-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.student-icon { width: 3rem; height: 3rem; flex: none; border-radius: 0.9rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--school-ink, #fff); background: var(--school-colour, var(--genz-primary)); box-shadow: var(--glass-shadow); }
.student-eyebrow { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--genz-text-muted); }
.student-lead { color: var(--genz-text-muted); margin-top: 0.5rem; max-width: 44rem; }
.student-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.std-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 1rem; }
.std-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.1rem; border-radius: var(--border-radius-md); background: var(--genz-card-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); color: inherit; text-decoration: none; border-top: 0.3rem solid var(--school-colour, var(--genz-primary)); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.std-card:hover, .std-card:focus-visible { transform: translateY(-2px); box-shadow: var(--card-shadow); color: inherit; text-decoration: none; }
.std-card-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.std-days { font-size: 0.8rem; font-weight: 600; color: var(--genz-text-muted); }
.std-days.is-near { color: #A53E22; }
[data-theme="dark"] .std-days.is-near { color: #FFB39E; }
.std-card-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0; color: var(--genz-dark); }
.std-card-grades { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.std-card-grades > span { display: inline-flex; flex-direction: column; gap: 0.2rem; }
.std-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--genz-text-muted); }
.std-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: auto; font-size: 0.85rem; color: var(--genz-text-muted); }
.std-open { font-weight: 700; color: var(--genz-primary); }
/* The back link (rule 3.8, 11 Oct): one component, a pill in the school's colour, never a small grey line. */
.back-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.back-link, .admin-back { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.95rem 0.4rem 0.75rem; border-radius: 999px; font-size: 0.95rem; font-weight: 700; color: var(--school-colour, var(--genz-primary)); background: var(--genz-card-bg); border: 2px solid var(--school-colour, var(--genz-primary)); text-decoration: none; margin-bottom: 0.9rem; transition: background 0.15s ease, color 0.15s ease; }
.back-link:hover, .back-link:focus-visible, .admin-back:hover, .admin-back:focus-visible { background: var(--school-colour, var(--genz-primary)); color: var(--school-ink, var(--genz-on-primary)); text-decoration: none; }
.back-row .back-link { margin-bottom: 0; }
.back-aside { font-size: 0.9rem; font-weight: 600; color: var(--genz-text-muted); text-decoration: none; }
.back-aside::before { content: '·'; margin-right: 0.75rem; }
.back-aside:hover { text-decoration: underline; }
/* My standards as a plan (10 Oct): the figures, the certificate bar, a block per subject, the road to university. */
.std-figures { grid-template-columns: repeat(4, 1fr); margin-bottom: 0.5rem; }
@media (max-width: 767.98px) { .std-figures { grid-template-columns: repeat(2, 1fr); } }
.std-note { font-size: 0.8rem; color: var(--genz-text-muted); margin-bottom: 1rem; }
.cert-bar { display: flex; height: 0.8rem; border-radius: 999px; overflow: hidden; background: var(--genz-surface-hover); margin: 0.5rem 0; }
.cert-bar > span { display: block; height: 100%; }
.cert-bar .is-got { background: var(--school-colour, var(--genz-primary)); }
.cert-bar .is-working { background: repeating-linear-gradient(135deg, var(--genz-accent) 0 0.4rem, rgba(255,122,89,0.45) 0.4rem 0.8rem); }
.cert-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; color: var(--genz-text-muted); }
.cert-legend i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 0.2rem; margin-right: 0.3rem; vertical-align: -0.05rem; }
.cert-legend .is-got { background: var(--school-colour, var(--genz-primary)); }
.cert-legend .is-working { background: var(--genz-accent); }
.cert-legend .is-rest { background: var(--genz-surface-hover); border: 1px solid var(--genz-text-muted); }
.subject-block { margin-top: 1.5rem; }
.subject-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.subject-head h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.subject-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.subject-figures { font-size: 0.85rem; color: var(--genz-text-muted); margin-bottom: 0.75rem; }
.subject-figures strong { color: var(--genz-dark); }
.std-card.is-got { border-top-color: var(--genz-success); }
.std-card.is-missed { border-top-color: #A8322E; }
.std-card-actions { display: flex; gap: 0.75rem; align-items: center; }
.std-card-actions .btn-link { padding: 0; font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.std-card .std-card-title a, .std-card .std-card-title a:visited { color: var(--genz-dark); text-decoration: none; }
.std-card-title a:hover { text-decoration: underline; }
.ue-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.ue-item { display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.6rem; align-items: start; }
.ue-mark { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; background: var(--genz-surface-hover); color: var(--genz-text-muted); }
.ue-item.is-met .ue-mark { background: var(--genz-success); color: #fff; }
.ue-item.is-part .ue-mark { background: var(--genz-accent); color: #fff; }
.ue-item.is-ahead .ue-mark { border: 2px dashed var(--genz-text-muted); background: transparent; }
.ue-item strong { display: block; }
.ue-item small { display: block; color: var(--genz-text-muted); line-height: 1.35; }
.ue-item .ue-line { font-size: 0.88rem; }
/* Progress as a cockpit (10 Oct): the figures, what needs attention, the standing chips, where help is. */
.pg-figures { grid-template-columns: repeat(4, 1fr); margin-bottom: 1rem; }
@media (max-width: 767.98px) { .pg-figures { grid-template-columns: repeat(2, 1fr); } }
.attention-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.attention-item { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.65rem 0.8rem; border-radius: var(--border-radius-sm); background: var(--genz-surface-hover); border-left: 0.3rem solid var(--genz-text-muted); }
.attention-item.is-now { border-left-color: #A8322E; }
.attention-item.is-soon { border-left-color: var(--genz-gold); }
.attention-item.is-note { border-left-color: var(--genz-primary); }
.attention-item > i { flex: none; margin-top: 0.1rem; }
.attention-item.is-now > i { color: #A8322E; }
.attention-item.is-soon > i { color: #8A6100; }
.attention-item.is-note > i { color: var(--genz-primary); }
[data-theme="dark"] .attention-item.is-now > i { color: #F4A5A1; }
[data-theme="dark"] .attention-item.is-soon > i { color: #FFD98A; }
.attention-item .attention-text { flex: 1; min-width: 0; font-size: 0.9rem; }
.attention-item .attention-action { flex: none; font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 575.98px) { .attention-item { flex-wrap: wrap; } .attention-item .attention-action { margin-left: 1.75rem; } }
.standing-chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--genz-surface-hover); color: var(--genz-text-muted); white-space: nowrap; }
.standing-chip.is-on { background: rgba(46, 158, 91, 0.16); color: #1E6B3E; }
.standing-chip.is-below { background: rgba(255, 122, 89, 0.18); color: #A53E22; }
[data-theme="dark"] .standing-chip.is-on { color: #8FE0AE; }
[data-theme="dark"] .standing-chip.is-below { color: #FFB39E; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; }
.help-card { padding: 0.9rem 1rem; border-radius: var(--border-radius-sm); background: var(--genz-surface-hover); font-size: 0.88rem; }
.help-card h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.4rem; }
.help-card h3 i { color: var(--school-colour, var(--genz-primary)); }
.help-card ul { padding-left: 1.1rem; margin-bottom: 0; }
.help-card li { margin-bottom: 0.2rem; }
.help-card .need-to-talk summary { font-size: 0.88rem; }
/* Me (10 Oct): the figures, the lines about you with their Change, a card per class. */
.me-figures { grid-template-columns: repeat(4, 1fr); margin-bottom: 1rem; }
@media (max-width: 767.98px) { .me-figures { grid-template-columns: repeat(2, 1fr); } }
.me-lines{list-style:none;padding:0;margin:0;display:grid;gap:.75rem;grid-template-columns:1fr;}@media (min-width: 576px){.me-lines{grid-template-columns:repeat(2, 1fr);}}@media (min-width: 992px){.me-lines{grid-template-columns:repeat(3, 1fr);}}.me-lines li{display:flex;flex-direction:column;gap:.35rem;padding:.8rem .9rem;font-size:.9rem;border:var(--glass-border);border-radius:var(--border-radius-md);}.me-lines li>i{color:var(--school-colour,var(--genz-primary));font-size:1.1rem;}.me-lines li>span{flex:1;}.me-lines strong{display:block;}.me-lines li>a{font-size:.85rem;font-weight:700;text-decoration:none;}.me-lines li.is-todo>i{color:#A8322E;}
.me-class { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.1rem; border-radius: var(--border-radius-md); background: var(--genz-card-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); border-top: 0.3rem solid var(--school-colour, var(--genz-primary)); }
.me-class[data-kind="form"] { border-top-color: var(--genz-gold); }
.me-class-name { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--genz-dark); }
.me-class-standards { list-style: none; padding: 0; margin: 0 0 0.25rem; font-size: 0.88rem; display: grid; gap: 0.2rem; }
.me-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.75rem; }
.me-tile { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.95rem 1rem; border-radius: var(--border-radius-md); background: var(--genz-card-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); color: inherit; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.me-tile:hover, .me-tile:focus-visible { transform: translateY(-2px); box-shadow: var(--card-shadow); color: inherit; }
.me-tile > i { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 0.75rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--school-ink, #fff); background: var(--school-colour, var(--genz-primary)); }
.me-tile strong { display: block; }
.me-tile small { display: block; color: var(--genz-text-muted); line-height: 1.35; }
.record-panel .glass-card { box-shadow: none; }

/* A guide as a deck (10 Oct): one slide per chapter, the key phrases marked. */
.deck { position: relative; }
.deck-slide { display: none; padding: 1.5rem 1.75rem; border-radius: var(--border-radius-md); background: var(--genz-card-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); border-top: 0.35rem solid var(--school-colour, var(--genz-primary)); min-height: 24rem; }
.deck-slide.is-current, .deck.show-all .deck-slide { display: block; }
.deck.show-all .deck-slide { margin-bottom: 1rem; }
.deck-eyebrow { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--genz-text-muted); margin-bottom: 0.35rem; }
.deck-slide h2.deck-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.9rem; color: var(--genz-dark); }
.deck-cover .deck-title { font-size: 2rem; }
.deck-cover .guide h2, .deck-cover .guide h1 { display: none; }
.deck-slide .guide { font-size: 1.05rem; line-height: 1.6; }
.deck-slide .guide h3, .deck-slide .guide h4 { font-size: 1.05rem; margin-top: 1rem; }
.deck-slide .guide li { margin-bottom: 0.35rem; }
/* The key phrases: a soft tint in the light theme, the gold ink in the dark one. */
.deck-slide .guide strong { background: rgba(245, 181, 68, 0.28); padding: 0.05em 0.3em; border-radius: 0.35em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:root[data-theme="dark"] .deck-slide .guide strong { background: none; padding: 0; color: var(--genz-gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .deck-slide .guide strong { background: none; padding: 0; color: var(--genz-gold); } }
:root .deck .deck-cover .guide strong { background: none; padding: 0; color: inherit; }   /* the facts line on the cover: plain bold */
.deck-remember { margin-top: 1.25rem; padding: 0.8rem 1rem; border-radius: var(--border-radius-md); background: rgba(245, 181, 68, 0.14); display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; align-items: center; }
.deck-remember .deck-remember-label { font-weight: 700; color: var(--genz-dark); margin-right: 0.25rem; }
.deck-remember .lib-chip { background: var(--genz-card-bg); color: var(--genz-dark); white-space: normal; }
.deck-contents { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); grid-auto-rows: 1fr; gap: 0.5rem; }   /* every tile the same size */
.deck-contents li { padding: 0.7rem 0.9rem; border-radius: var(--border-radius-sm); background: var(--genz-surface-hover); display: flex; gap: 0.6rem; align-items: center; cursor: pointer; min-height: 3.6rem; transition: background 0.15s ease; }
.deck-contents li:hover { background: color-mix(in srgb, var(--school-colour, var(--genz-primary)) 12%, var(--genz-surface-hover)); }
.deck-contents .deck-n { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--school-colour, var(--genz-primary)); color: var(--school-ink, var(--genz-on-primary)); font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* The controls sit above the slide, in one place whatever the chapter's length,
   and stay in view while a long chapter scrolls. */
.deck-nav { position: sticky; top: 5rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--border-radius-md); background: var(--genz-card-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); }
.deck-dots { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.deck-dots button { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 0; padding: 0; background: var(--genz-surface-hover); cursor: pointer; }
.deck-dots button.is-current { background: var(--school-colour, var(--genz-primary)); transform: scale(1.3); }
.deck-dots button.is-seen { background: color-mix(in srgb, var(--school-colour, var(--genz-primary)) 45%, transparent); }
.deck.show-all .deck-nav .deck-dots, .deck.show-all .deck-nav .deck-step { visibility: hidden; }
.deck-count { font-size: 0.9rem; color: var(--genz-text-muted); }
@media (max-width: 575.98px) { .deck-slide { padding: 1rem 1.1rem; min-height: 0; } .deck-slide h2.deck-title { font-size: 1.3rem; } .deck-cover .deck-title { font-size: 1.5rem; } .deck-nav { position: static; } }

/* The stair on Today (10 Oct): steps climbing to the target. */
.stair-target { display: flex; gap: 0.5rem; align-items: center; font-weight: 700; padding: 0.5rem 0.75rem; border-radius: var(--border-radius-sm); background: rgba(245, 181, 68, 0.18); margin-bottom: 0.5rem; }
.stair-target i { color: var(--genz-gold); }
.stair-steps { list-style: none; margin: 0; padding: 0 0 0 0.35rem; position: relative; }
.stair[data-view="whole"] .stair-steps { max-height: 26rem; overflow-y: auto; padding-right: 0.25rem; }
.stair-step { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0 0.4rem 0.5rem; border-left: 2px solid var(--genz-surface-hover); }
.stair-step.is-hidden { display: none; }
.stair-step.is-next { margin-left: 2rem; }
.stair-step.is-later { margin-left: 3rem; opacity: 0.8; }
.stair-step.is-later .stair-mark { background: transparent; border: 2px dashed var(--genz-text-muted); }
.stair-step.is-now { margin-left: 1rem; border-left-color: var(--genz-action, #FF7A59); }
.stair-step.is-done { margin-left: 0; opacity: 0.85; }
.stair-mark { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; margin-top: 0.1rem; background: var(--genz-surface-hover); color: var(--genz-text-muted); }
.stair-step.is-done .stair-mark { background: var(--genz-success); color: #fff; }
.stair-step.is-now .stair-mark { background: var(--genz-action, #FF7A59); color: #1E1B3A; }
.stair-step.is-now .stair-title { font-weight: 700; }
.stair-body { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.stair-title { font-size: 0.92rem; line-height: 1.3; color: inherit; }
a.stair-title { text-decoration: none; } a.stair-title:hover { text-decoration: underline; }
.stair-meta { font-size: 0.78rem; color: var(--genz-text-muted); display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.stair .btn-group .btn.active { background: var(--genz-primary); color: var(--genz-on-primary); border-color: var(--genz-primary); }
@media (max-width: 575.98px) { .stair-step.is-next { margin-left: 1.25rem; } .stair-step.is-later { margin-left: 1.9rem; } .stair-step.is-now { margin-left: 0.6rem; } }

/* The feedback revealed step by step (10 Oct). */
.reveal-step.is-hidden { display: none; }
.reveal-next { display: block; margin-top: 0.75rem; }
/* The Quick check result as a deck: a wrong answer's dot and tile are red. */
.deck-dots button.is-wrong { background: rgba(217, 83, 79, 0.55); }
.deck-dots button.is-wrong.is-current { background: #A8322E; }
.deck-contents li.is-wrong .deck-n { background: #A8322E; color: #fff; }
.quick-answer { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0.75rem 0; }
.quick-answer > div { padding: 0.6rem 0.9rem; border-radius: var(--border-radius-sm); background: var(--genz-surface-hover); min-width: 12rem; }
.quick-answer .is-right { box-shadow: inset 0 0 0 2px rgba(40, 167, 110, 0.5); }
.quick-answer .is-wrong { box-shadow: inset 0 0 0 2px rgba(217, 83, 79, 0.5); }
/* The review pages' contents list: the deck's tiles as links. */
.review-contents a { display: flex; gap: 0.6rem; align-items: center; width: 100%; color: inherit; text-decoration: none; }
.guide h3[id^="ch-"] { scroll-margin-top: 6rem; }

/* Guides (10 Oct): a checklist the reader ticks, and a facts line on its own. */
.guide-task { list-style: none; margin-left: -1.25rem; }
.guide-task label { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; }
.guide-task input { margin-top: 0.3rem; flex: none; }
.guide-task input:checked + span { color: var(--genz-text-muted); text-decoration: line-through; }
.guide-meta br + * { display: inline; }

/* The student record (10 Oct): figures, a progress line per standard, and a side
   panel with what the teacher can do (nudge, note) over the notes timeline. */
.record-aside { position: sticky; top: 5.5rem; }
@media (max-width: 991px) { .record-aside { position: static; } }
.record-panel { padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--genz-card-bg); border: var(--glass-border); border-radius: var(--border-radius-md); box-shadow: var(--glass-shadow); }
.record-panel h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.35rem; }
.record-reasons { margin-bottom: 1rem; padding: 0.8rem 1rem; border-radius: var(--border-radius-md); background: rgba(245, 181, 68, 0.16); border-left: 0.3rem solid var(--genz-gold); }
.record-reasons ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.record-standard { height: 100%; padding: 0.9rem 1rem; border-radius: var(--border-radius-md); background: var(--genz-card-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); display: flex; flex-direction: column; gap: 0.6rem; }
.record-standard .record-title { font-weight: 700; line-height: 1.25; }
.record-line { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
.record-line > div { padding: 0.45rem 0.6rem; border-radius: var(--border-radius-sm); background: var(--genz-surface-hover); min-width: 0; }
.record-line .record-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--genz-text-muted); margin-bottom: 0.2rem; }
.record-line .is-up { box-shadow: inset 0 0 0 2px rgba(40, 167, 110, 0.35); }
.record-standard details summary { cursor: pointer; color: var(--genz-text-muted); font-size: 0.85rem; }
.record-timeline { list-style: none; padding: 0; margin: 0; }
.record-timeline li { position: relative; padding: 0.3rem 0 0.6rem 1rem; border-left: 2px solid var(--genz-surface-hover); }
.record-timeline li::before { content: ''; position: absolute; left: -0.4rem; top: 0.6rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--genz-primary); }
.record-timeline li[data-record-item="nudge"]::before { background: var(--genz-success); }
.record-timeline li[data-record-item="target"]::before { background: var(--genz-accent, #FF7A59); }
.record-timeline .record-meta { font-size: 0.8rem; color: var(--genz-text-muted); }

/* Classes and schools (10 Oct): the school's banner and the filter toolbar. */
.school-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem; border-radius: var(--border-radius-md); border: var(--glass-border); border-left: 0.4rem solid var(--school-colour, var(--genz-primary)); background: linear-gradient(120deg, rgba(var(--bs-primary-rgb), 0.16), rgba(255, 122, 89, 0.10) 70%, rgba(245, 181, 68, 0.14)); }
.school-banner-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
/* The crest tile is the top bar's plum in both themes (crests are often white on transparent); contained, never cropped. */
.school-icon { height: 6.5rem; width: auto; min-width: 6.5rem; max-width: 16rem; flex: none; border-radius: 1rem; object-fit: contain; padding: 0.6rem; background: var(--school-colour, var(--genz-plum)); box-shadow: var(--glass-shadow); }
.school-icon-letter { display: flex; align-items: center; justify-content: center; font-size: 2.75rem; font-weight: 700; color: #fff; background: var(--school-colour, var(--genz-primary)); }
.school-slogan { font-style: italic; color: var(--genz-text-muted); line-height: 1.3; }
/* The school's colour on the motto in the light theme only: on the dark theme a
   school's dark colour would sink into the page, so the motto stays white there. */
.school-slogan[lang="mi"] { font-style: normal; font-weight: 600; color: var(--school-colour, var(--genz-dark)); }
:root[data-theme="dark"] .school-slogan[lang="mi"] { color: var(--genz-dark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .school-slogan[lang="mi"] { color: var(--genz-dark); } }
/* With a school colour, the banner is that colour: its ink is white on a dark
   colour and the site's plum on a light one (services/school_identity.ink_for). */
.school-banner.has-colour { color: var(--school-ink, #fff); border-left-color: color-mix(in srgb, var(--school-colour) 55%, var(--school-ink, #fff)); background: linear-gradient(120deg, var(--school-colour), color-mix(in srgb, var(--school-colour) 78%, #000) 85%); }
.school-banner.has-colour h2, .school-banner.has-colour .school-slogan[lang="mi"], :root[data-theme="dark"] .school-banner.has-colour .school-slogan[lang="mi"] { color: var(--school-ink, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .school-banner.has-colour .school-slogan[lang="mi"] { color: var(--school-ink, #fff); } }
.school-banner.has-colour .school-slogan { color: color-mix(in srgb, var(--school-ink, #fff) 82%, transparent); }
.school-banner.has-colour .school-icon { background: color-mix(in srgb, var(--school-colour) 80%, #000); border: 1px solid color-mix(in srgb, var(--school-ink, #fff) 25%, transparent); box-shadow: none; }
.school-banner.has-colour .school-banner-figures .class-figure { background: color-mix(in srgb, var(--school-ink, #fff) 14%, transparent); }
.school-banner.has-colour .class-figure-n { color: var(--school-ink, #fff); }
.school-banner.has-colour .class-figure-label { color: color-mix(in srgb, var(--school-ink, #fff) 85%, transparent); }
.school-banner.has-colour a { color: inherit; }
.school-banner-figures { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; flex: 1 1 22rem; }
.school-banner-figures .class-figure { background: var(--genz-card-bg); text-align: center; padding: 0.45rem 0.7rem; min-width: 5rem; }
.class-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; padding: 0.75rem 1rem; margin-bottom: 1.5rem; border-radius: var(--border-radius-md); background: var(--genz-surface-hover); }
.class-toolbar .toolbar-count { margin-left: auto; align-self: center; font-size: 0.85rem; color: var(--genz-text-muted); }
@media (max-width: 575.98px) {
  .school-banner { padding: 1rem; }
  .school-icon { height: 4.5rem; min-width: 4.5rem; max-width: 12rem; border-radius: 0.75rem; padding: 0.4rem; }
  .school-icon-letter { font-size: 2rem; }
  .class-toolbar .toolbar-count { margin-left: 0; }
}
/* 17 Oct: NZQA's exam dates on Today, once; and a student's own date beside NZQA's. */
.exam-news, .exam-differs { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; padding: 0.75rem 1rem; border-radius: var(--border-radius-sm); background: rgba(245, 181, 68, 0.18); border-left: 4px solid var(--genz-gold); }
.exam-news > div, .exam-differs > span { flex: 1 1 16rem; min-width: 0; }
.exam-news > i { font-size: 1.25rem; color: var(--genz-warning-text); }
/* 18 Oct: a scrolling table holds its positioned children (a hidden heading widened a phone page) */
.table-responsive { position: relative; }
/* 19 Oct: phone tables pin their name */
@media (max-width: 575.98px){.table-responsive>.table>*>tr>:first-child:not(.visually-hidden):not([colspan]){position:sticky;left:0;z-index:1;overflow-wrap:break-word;word-break:normal;max-width:45vw;background:var(--genz-card-bg);box-shadow:inset -1px 0 var(--bs-border-color)}.table-responsive>.table>*>tr>[colspan]>*{position:sticky;left:.5rem;max-width:calc(100vw - 4rem)}}