/* Student Growth Platform design system (indigo identity) — see docs/DESIGN-SYSTEM.md. Mobile first. */

/* ---------- Tokens: light (default) ---------- */
:root {
    color-scheme: light;
    /* Brand: indigo #4F46E5 / hover #4338CA, secondary blue #0EA5E9, accent purple #8B5CF6 */
    --brand-800: #3730a3;
    --brand-700: #4f46e5;
    --brand-600: #4338ca;
    --brand-100: #e0e7ff;
    --brand-50: #eef2ff;
    --btn: #4f46e5;
    --btn-hover: #4338ca;
    --on-brand: #ffffff;
    --sky: #0ea5e9;
    --violet: #8b5cf6;
    --accent: #6d28d9;
    --accent-50: #f3e8ff;
    --ink: #0f172a;
    --ink-muted: #475569;
    --ink-subtle: #64748b;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --surface-alt: #f8fafc;
    --surface-sunken: #e9eef5;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    /* Semantic: #10B981 / #F59E0B / #EF4444 for fills; darker shades where they are small text (AA) */
    --success: #047857; --success-dot: #10b981; --success-50: #ecfdf5;
    --warning: #b45309; --warning-dot: #f59e0b; --warning-50: #fffbeb;
    --danger: #dc2626; --danger-dot: #ef4444; --danger-50: #fef2f2;
    /* Icon tiles */
    --tone-indigo-bg: #eef2ff; --tone-indigo: #4f46e5;
    --tone-sky-bg: #e0f2fe; --tone-sky: #0369a1;
    --tone-violet-bg: #f3e8ff; --tone-violet: #7c3aed;
    --tone-green-bg: #d1fae5; --tone-green: #047857;
    --tone-amber-bg: #fef3c7; --tone-amber: #b45309;
    --logo-a: #4f46e5; --logo-b: #0ea5e9; --logo-c: #8b5cf6; --logo-on-tile: #ffffff;
    --glow-1: rgba(99, 102, 241, .16); --glow-2: rgba(14, 165, 233, .12); --glow-3: rgba(139, 92, 246, .14);
    --device-bezel: #1e293b; --device-base: #cbd5e1;
    --band-bg: linear-gradient(120deg, #312e81 0%, #4338ca 55%, #6d28d9 100%);
    --band-ink: #ffffff; --band-muted: rgba(255, 255, 255, .86); --band-line: rgba(255, 255, 255, .45);
    --dot: rgba(15, 23, 42, .06);

    --font: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Code", "SF Mono", ui-monospace, Consolas, "Roboto Mono", monospace;
    /* Type scale (board: H1 56/64, H2 40/48, H3 28/36, H4 20/28, body 16/24, small 14/20, caption 12/16), fluid on phones */
    --text-display: clamp(2.125rem, 1.45rem + 2.9vw, 3.5rem);
    --text-h1: clamp(1.875rem, 1.45rem + 1.7vw, 2.75rem);
    --text-h2: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
    --text-h3: 1.25rem;
    --text-small: 0.875rem;
    --text-caption: 0.75rem;

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
    --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 14px 34px -16px rgba(30, 41, 89, .22), 0 2px 6px rgba(15, 23, 42, .04);
    --shadow-lg: 0 30px 60px -28px rgba(49, 46, 129, .35), 0 8px 18px -10px rgba(15, 23, 42, .12);
    --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-700);
    --container: 1200px;
    --header-h: 64px;
    --ease: 160ms ease-out;
}

/* ---------- Tokens: dark (OS preference when no choice is stored, or the header toggle) ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --brand-800: #e0e7ff; --brand-700: #a5b4fc; --brand-600: #c7d2fe; --brand-100: #2b3270; --brand-50: #1a1f45;
        --btn: #4f46e5; --btn-hover: #4338ca; --on-brand: #ffffff;
        --accent: #c4b5fd; --accent-50: #2a1f4d;
        --ink: #f8fafc; --ink-muted: #a8b5cc; --ink-subtle: #8a97b0;
        --surface: #111827; --surface-2: #151d30; --surface-alt: #0b1020; --surface-sunken: #1a2338;
        --line: #263249; --line-strong: #36445f;
        --success: #34d399; --success-50: #0d2a22; --warning: #fbbf24; --warning-50: #2b2110; --danger: #f87171; --danger-50: #2e1518;
        --tone-indigo-bg: rgba(99, 102, 241, .18); --tone-indigo: #a5b4fc;
        --tone-sky-bg: rgba(14, 165, 233, .16); --tone-sky: #7dd3fc;
        --tone-violet-bg: rgba(139, 92, 246, .18); --tone-violet: #c4b5fd;
        --tone-green-bg: rgba(16, 185, 129, .16); --tone-green: #6ee7b7;
        --tone-amber-bg: rgba(245, 158, 11, .16); --tone-amber: #fcd34d;
        --logo-a: #6366f1; --logo-b: #38bdf8; --logo-c: #8b5cf6;
        --glow-1: rgba(99, 102, 241, .22); --glow-2: rgba(14, 165, 233, .12); --glow-3: rgba(139, 92, 246, .2);
        --device-bezel: #05070f; --device-base: #263249;
        --band-bg: linear-gradient(120deg, #1e1b4b 0%, #312e81 55%, #4c1d95 100%);
        --dot: rgba(248, 250, 252, .05);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-md: 0 16px 36px -18px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .3);
        --shadow-lg: 0 30px 60px -26px rgba(0, 0, 0, .8), 0 0 0 1px rgba(165, 180, 252, .06);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --brand-800: #e0e7ff; --brand-700: #a5b4fc; --brand-600: #c7d2fe; --brand-100: #2b3270; --brand-50: #1a1f45;
    --btn: #4f46e5; --btn-hover: #4338ca; --on-brand: #ffffff;
    --accent: #c4b5fd; --accent-50: #2a1f4d;
    --ink: #f8fafc; --ink-muted: #a8b5cc; --ink-subtle: #8a97b0;
    --surface: #111827; --surface-2: #151d30; --surface-alt: #0b1020; --surface-sunken: #1a2338;
    --line: #263249; --line-strong: #36445f;
    --success: #34d399; --success-50: #0d2a22; --warning: #fbbf24; --warning-50: #2b2110; --danger: #f87171; --danger-50: #2e1518;
    --tone-indigo-bg: rgba(99, 102, 241, .18); --tone-indigo: #a5b4fc;
    --tone-sky-bg: rgba(14, 165, 233, .16); --tone-sky: #7dd3fc;
    --tone-violet-bg: rgba(139, 92, 246, .18); --tone-violet: #c4b5fd;
    --tone-green-bg: rgba(16, 185, 129, .16); --tone-green: #6ee7b7;
    --tone-amber-bg: rgba(245, 158, 11, .16); --tone-amber: #fcd34d;
    --logo-a: #6366f1; --logo-b: #38bdf8; --logo-c: #8b5cf6;
    --glow-1: rgba(99, 102, 241, .22); --glow-2: rgba(14, 165, 233, .12); --glow-3: rgba(139, 92, 246, .2);
    --device-bezel: #05070f; --device-base: #263249;
    --band-bg: linear-gradient(120deg, #1e1b4b 0%, #312e81 55%, #4c1d95 100%);
    --dot: rgba(248, 250, 252, .05);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 16px 36px -18px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-lg: 0 30px 60px -26px rgba(0, 0, 0, .8), 0 0 0 1px rgba(165, 180, 252, .06);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface-alt);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.18; margin: 0 0 var(--space-3); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--text-h1); font-weight: 750; }
h2 { font-size: var(--text-h2); font-weight: 720; }
h3 { font-size: var(--text-h3); font-weight: 650; letter-spacing: -.01em; line-height: 1.4; }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a { color: var(--brand-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-600); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
::selection { background: var(--brand-100); color: var(--ink); }
.muted { color: var(--ink-muted); }
.small { font-size: var(--text-small); line-height: 1.45; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); }
.lead { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.6; color: var(--ink-muted); max-width: 62ch; }
.grad { background: linear-gradient(100deg, var(--brand-700) 10%, var(--violet) 60%, var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -60px; z-index: 100; background: var(--surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.skip-link:focus { top: var(--space-3); }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 32px; } }
.section { padding: var(--space-7) 0; }
@media (min-width: 1024px) { .section { padding: 80px 0; } }
.section--band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--tight { padding-top: var(--space-5); padding-bottom: 0; }
.section--flush { padding-top: 0; }
.section__head { max-width: 680px; margin-bottom: var(--space-6); }
.section__head > :last-child { margin-bottom: 0; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head--center .lead { margin-left: auto; margin-right: auto; }
.section__head--split { max-width: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: end; justify-content: space-between; }
.section__head--split > div { max-width: 640px; }
.grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .grid { gap: var(--space-5); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Page intro: shared opening for inner pages (soft glow, never a full gradient). */
.page-intro { position: relative; overflow: hidden; padding: var(--space-7) 0 var(--space-6); background: radial-gradient(60% 120% at 100% 0%, var(--glow-1), transparent 60%), radial-gradient(40% 90% at 85% 100%, var(--glow-2), transparent 70%), var(--surface-alt); border-bottom: 1px solid var(--line); }
.page-intro h1 { max-width: 24ch; }
.page-intro .lead { margin-bottom: 0; }
@media (min-width: 1024px) { .page-intro { padding: 72px 0 56px; } .page-intro + .section { padding-top: 56px; } }

/* ---------- Buttons ---------- */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding: 10px 18px; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: var(--btn); color: var(--on-brand);
    font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: background var(--ease), box-shadow var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.button:hover { background: var(--btn-hover); color: var(--on-brand); }
.button:active { transform: translateY(1px); }
.button .icon { transition: transform var(--ease); }
.button:hover .icon { transform: translateX(2px); }
.button--secondary { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); box-shadow: none; }
.button--secondary:hover { background: var(--brand-100); color: var(--brand-700); }
.button--outline { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.button--outline:hover { background: var(--surface); color: var(--brand-700); border-color: var(--brand-700); }
.button--ghost { background: transparent; color: var(--ink); border-color: transparent; box-shadow: none; }
.button--ghost:hover { background: var(--surface-2); color: var(--ink); }
.button--outline:active, .button--ghost:active, .button--secondary:active { background: var(--surface-sunken); }
.button--danger { background: var(--danger-dot); color: #fff; }
.button--danger:hover { background: var(--danger); color: #fff; }
.button--block { width: 100%; }
.button--large { min-height: 50px; padding: 12px 22px; font-size: 1rem; }
.button:disabled, .button[aria-disabled="true"] { opacity: .6; cursor: not-allowed; box-shadow: none; transform: none; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Phones: primary actions take the full width and stack. */
@media (max-width: 479px) { .button-row--stack { flex-direction: column; align-items: stretch; } .button-row--stack .button { width: 100%; } }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------- Brand lockup ---------- */
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm); min-height: 44px; }
.logo:hover { color: var(--ink); }
.logo__mark { width: 34px; height: 31px; flex: none; }
.logo__mark--tile { width: 40px; height: 40px; }
.logo__stop-a { stop-color: var(--logo-a); }
.logo__stop-b { stop-color: var(--logo-b); }
.logo__stop-c { stop-color: var(--logo-c); }
.logo__on-tile { fill: var(--logo-on-tile); }
.logo__text { display: grid; line-height: 1; }
.logo__name { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.035em; }
.logo__full { margin-top: 4px; font-size: .72rem; font-weight: 550; letter-spacing: .005em; color: var(--ink-muted); }
.logo--full .logo__mark { width: 40px; height: 36px; }
.logo--full .logo__name { font-size: 1.6rem; }

/* ---------- Header / navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-2); min-height: var(--header-h); }
.nav { display: none; }
.nav a { position: relative; color: var(--ink-muted); text-decoration: none; font-weight: 550; font-size: .92rem; padding: 10px 9px; border-radius: 8px; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--brand-700); font-weight: 650; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: -12px; height: 2px; border-radius: 2px; background: var(--brand-700); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.site-header__signin, .site-header__cta { display: none; }
.site-header__actions .button { min-height: 40px; padding: 8px 14px; font-size: .9rem; }
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); cursor: pointer; transition: color var(--ease), border-color var(--ease), background var(--ease); }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.theme-toggle .icon { width: 20px; height: 20px; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
/* Mobile menu: a <details> disclosure (works without JS); a full-height sheet below the header on phones. */
.menu { position: static; }
.menu > summary { list-style: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icon { width: 22px; height: 22px; }
.menu__close { display: none; }
.menu[open] > summary { border-color: var(--brand-700); color: var(--brand-700); }
.menu[open] .menu__open { display: none; }
.menu[open] .menu__close { display: block; }
.menu__panel { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 39; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4) 16px calc(var(--space-5) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; }
.menu__links { display: grid; }
.menu__links a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--space-2); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 1.05rem; font-weight: 600; }
.menu__links a::after { content: "›"; color: var(--ink-subtle); font-size: 1.3rem; }
.menu__links a[aria-current="page"] { color: var(--brand-700); }
.menu__account { margin-top: auto; display: grid; gap: var(--space-3); }
body:has(.menu[open]) { overflow: hidden; }
@media (min-width: 640px) {
    .menu { position: relative; }
    .menu__panel { position: absolute; left: auto; right: 0; bottom: auto; top: calc(100% + 10px); width: 320px; max-height: calc(100vh - var(--header-h) - 24px); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-3); gap: var(--space-3); }
    .menu__links a { min-height: 48px; font-size: 1rem; }
    .menu__account { margin-top: 0; }
    body:has(.menu[open]) { overflow: visible; }
}
@media (min-width: 380px) { .site-header__cta { display: inline-flex; } }
@media (min-width: 768px) { .site-header__signin { display: inline-flex; } .menu__account { display: none; } }
@media (min-width: 1180px) {
    .nav { display: flex; gap: 0; margin-left: var(--space-5); }
    .menu { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: var(--space-7) 0 var(--space-5); }
.site-footer__grid { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; max-width: 360px; }
.site-footer__brand .logo { margin-bottom: var(--space-3); }
.site-footer__tagline { font-size: var(--text-small); font-weight: 600; color: var(--ink); margin: 0 0 var(--space-2); letter-spacing: .01em; }
.site-footer__col { display: grid; gap: 0; align-content: start; }
.site-footer__title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); margin: 0 0 var(--space-2); }
.site-footer__col a { color: var(--ink-muted); text-decoration: none; padding: 9px 0; font-size: .95rem; }
.site-footer__col a:hover { color: var(--brand-700); text-decoration: underline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
@media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
    .site-footer__brand { grid-column: auto; }
}

/* ---------- Home: hero ---------- */
.hero { position: relative; overflow: hidden; padding: var(--space-6) 0 var(--space-7); background: radial-gradient(48% 70% at 88% 18%, var(--glow-1), transparent 70%), radial-gradient(40% 55% at 70% 85%, var(--glow-2), transparent 70%), radial-gradient(30% 40% at 100% 70%, var(--glow-3), transparent 70%), var(--surface-alt); }
.hero__grid { display: grid; gap: var(--space-6); align-items: center; }
.hero h1 { font-size: var(--text-display); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; margin-bottom: var(--space-4); }
.hero h1 span.line { display: block; }
.hero .lead { margin-bottom: var(--space-5); }
.hero__note { margin: var(--space-4) 0 0; font-size: var(--text-small); color: var(--ink-muted); max-width: 54ch; }
@media (min-width: 1024px) {
    .hero { padding: 72px 0 88px; }
    .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--space-7); }
}

/* Hero visual: a device showing SGP's real build path (actual stages, actual availability). */
.hero__visual { position: relative; }
.device { position: relative; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.device__bar { display: flex; align-items: center; gap: var(--space-2); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.device__dots { display: inline-flex; gap: 5px; }
.device__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.device__title { margin-left: var(--space-2); font-size: var(--text-caption); font-weight: 650; color: var(--ink-subtle); }
.device__screen { padding: var(--space-4); }
.device__greeting { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.device__greeting h2 { font-size: 1.05rem; margin: 0; }
.device__greeting p { margin: 0; font-size: var(--text-caption); color: var(--ink-muted); }
.float-chip, .float-mark { display: none; }
@media (min-width: 768px) {
    .hero__visual { padding: 34px 26px 64px; }
    .device { border: 10px solid var(--device-bezel); border-bottom-width: 12px; border-radius: 18px; }
    .device__screen { padding: var(--space-5); }
    .hero__visual::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 50px; height: 14px; border-radius: 0 0 16px 16px; background: linear-gradient(var(--device-base), color-mix(in srgb, var(--device-base) 70%, var(--surface-alt))); box-shadow: var(--shadow-md); }
    .float-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); font-size: .8rem; line-height: 1.25; }
    .float-chip strong { display: block; font-size: .85rem; color: var(--ink); }
    .float-chip span { color: var(--ink-muted); }
    .float-chip .tile { width: 32px; height: 32px; border-radius: 9px; }
    .float-chip--build { left: -6px; top: 0; }
    .float-chip--collab { right: -6px; top: 10px; }
    .float-chip--feedback { left: -6px; bottom: 0; }
    .float-mark { position: absolute; z-index: 2; right: -6px; bottom: 6px; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
    .float-mark .logo__mark { width: 34px; height: 31px; }
}
@media (min-width: 1280px) { .float-chip--feedback { left: -24px; } }

/* Icon tiles (one restrained icon style, tinted by tone) */
.tile { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--tone-indigo-bg); color: var(--tone-indigo); }
.tile .icon { width: 22px; height: 22px; }
.tone-sky { background: var(--tone-sky-bg); color: var(--tone-sky); }
.tone-violet { background: var(--tone-violet-bg); color: var(--tone-violet); }
.tone-green { background: var(--tone-green-bg); color: var(--tone-green); }
.tone-amber { background: var(--tone-amber-bg); color: var(--tone-amber); }
.tone-muted { background: var(--surface-2); color: var(--ink-subtle); }

/* Build path (inside the device and on the register aside) */
.path { list-style: none; margin: 0; padding: 0; display: grid; }
.path__step { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 var(--space-3); padding-bottom: var(--space-3); }
.path__step:last-child { padding-bottom: 0; }
.path__step::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--line); }
.path__step:last-child::before { display: none; }
.path__step.is-open::before { background: linear-gradient(var(--brand-700), var(--line)); }
.path__node { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 750; border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink-subtle); position: relative; z-index: 1; }
.path__step.is-open .path__node { border-color: var(--btn); background: var(--btn); color: #fff; }
.path__step.is-goal .path__node { border-color: var(--violet); color: var(--accent); }
.path__label { font-weight: 650; font-size: .95rem; line-height: 1.35; padding-top: 2px; display: flex; flex-wrap: wrap; gap: 4px var(--space-2); align-items: center; }
.path__text { font-size: .82rem; color: var(--ink-muted); margin: 2px 0 0; }

/* ---------- Status labels (honest availability) ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: 650; line-height: 1.5; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--open { color: var(--success); background: var(--success-50); }
.status--soon { color: var(--ink-muted); background: var(--surface-2); border: 1px solid var(--line); }
.status--soon::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---------- Home: what students can do ---------- */
.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cap { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cap h3 { margin: var(--space-1) 0 0; font-size: 1.05rem; }
.cap p { margin: 0; color: var(--ink-muted); font-size: var(--text-small); }
.cap .status { justify-self: start; }
@media (min-width: 1024px) { .caps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } .cap { padding: var(--space-5); } .cap h3 { font-size: 1.15rem; } }
@media (max-width: 359px) { .caps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Process (home: 5 numbered steps) ---------- */
.process { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.process > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px var(--space-4); padding-bottom: var(--space-5); }
.process > li:last-child { padding-bottom: 0; }
.process > li::before { counter-increment: step; content: counter(step); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: #fff; font-weight: 750; position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--surface-alt); }
.process > li::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line); }
.process > li:last-child::after { display: none; }
.process h3 { margin: 8px 0 2px; font-size: 1.05rem; }
.process p { margin: 0; color: var(--ink-muted); font-size: var(--text-small); }
.process .status { margin-top: var(--space-2); grid-column: 2; justify-self: start; }
@media (min-width: 1024px) {
    .process { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
    .process > li { grid-template-columns: minmax(0, 1fr); padding: 0; align-content: start; }
    .process .status { grid-column: auto; }
    .process > li::before { grid-row: auto; margin-bottom: var(--space-3); }
    .process > li::after { left: 48px; right: calc(-1 * var(--space-5)); top: 19px; bottom: auto; width: auto; height: 2px; }
    .process h3 { margin-top: 0; }
}

/* ---------- Stage track (FY → BE) ---------- */
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.stage { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.stage__tag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: .8rem; font-weight: 800; letter-spacing: .04em; color: var(--brand-700); }
.stage__tag b { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 8px; background: var(--brand-50); }
.stage--now { border-color: color-mix(in srgb, var(--brand-700) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-700) 14%, transparent); }
.stage--now .stage__tag b { background: var(--btn); color: #fff; }
.stage h3 { margin: 0; }
.stage p { margin: 0; color: var(--ink-muted); font-size: var(--text-small); }
.stage ul { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-3) 0 0; border-top: 1px dashed var(--line); display: grid; gap: 8px; font-size: var(--text-small); }
.stage li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--space-2); align-items: center; }
@media (min-width: 640px) { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }

/* ---------- Steps (simple numbered cards, student portal) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
.steps li { position: relative; padding: var(--space-4) var(--space-4) var(--space-4) 64px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: var(--space-4); top: var(--space-4); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-700); font-size: .85rem; font-weight: 750; }
.steps h3 { margin-bottom: var(--space-1); }
.steps p { margin: 0; color: var(--ink-muted); }
@media (min-width: 1024px) { .steps--row { grid-template-columns: repeat(3, 1fr); } }

/* Vertical timeline (How it works) */
.timeline-steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; }
.timeline-steps > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 var(--space-4); padding-bottom: var(--space-6); }
.timeline-steps > li:last-child { padding-bottom: 0; }
.timeline-steps > li::before { counter-increment: step; content: counter(step); grid-row: span 4; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: #fff; font-weight: 750; position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--surface-alt); }
.timeline-steps > li::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: linear-gradient(var(--brand-100), var(--line)); }
.timeline-steps > li:last-child::after { display: none; }
.timeline-steps h2, .timeline-steps h3 { font-size: 1.15rem; margin: 8px 0 var(--space-1); }
.timeline-steps p { margin: 0 0 var(--space-2); color: var(--ink-muted); max-width: 62ch; }
.timeline-steps .step__meta { font-size: var(--text-small); color: var(--ink-subtle); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
@media (min-width: 768px) { .timeline-steps > li::before { width: 48px; height: 48px; font-size: 1.05rem; } .timeline-steps > li { grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--space-5); } .timeline-steps > li::after { left: 23px; top: 48px; } .timeline-steps h2 { margin-top: 11px; } }

/* ---------- Cards ---------- */
.card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); min-width: 0; }
a.card { color: inherit; text-decoration: none; transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease); }
a.card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand-700) 55%, var(--line)); transform: translateY(-2px); }
.card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tone-indigo-bg); color: var(--tone-indigo); margin-bottom: var(--space-2); }
.card__icon .icon { width: 22px; height: 22px; }
.card__title { margin: 0; font-size: 1.1rem; }
.card__text { margin: 0; color: var(--ink-muted); }
.card__meta { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-small); color: var(--ink-subtle); }
.card__meta .icon { width: 16px; height: 16px; }
.card__footer { margin-top: auto; padding-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.card--recommended { border-color: color-mix(in srgb, var(--violet) 55%, var(--line)); }
.card--wide { max-width: 960px; }
.card--soon { box-shadow: none; }

/* Tool cards (activities, career tools, portal): icon + status on top, years and action at the bottom */
.tool-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1); }
.tool-card__top .card__icon { margin: 0; }
.tool-card__bottom { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.card--soon .card__icon { filter: saturate(.55); opacity: .85; }
.card--feature { border-color: color-mix(in srgb, var(--brand-700) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-700) 10%, transparent), var(--shadow-sm); }
.year-card ul { margin: 0; padding-left: 1.1em; color: var(--ink-muted); }
.year-card li { margin: var(--space-1) 0; }
.year-tag { display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--brand-50); color: var(--brand-700); font-weight: 750; font-size: .85rem; }

/* Filter tabs (Activities). Shown only when JS can filter; every card is listed without it. */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-5); padding: 2px; }
.filter-tabs[hidden] { display: none; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tabs button { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.filter-tabs button:hover { color: var(--ink); border-color: var(--line-strong); }
.filter-tabs button[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: #fff; }
[data-filter-item][hidden] { display: none; }

/* ---------- Principles, trust, CTA band ---------- */
.principles { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.principles li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.principles h3 { margin: 0; font-size: 1.1rem; }
.principles p { margin: 0; color: var(--ink-muted); font-size: .95rem; }
@media (min-width: 768px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.principles--2 { }
@media (min-width: 768px) { .principles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trust { display: grid; gap: var(--space-4); }
.trust__col { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.trust__col h3 { display: flex; align-items: center; gap: var(--space-3); font-size: 1.1rem; margin-bottom: var(--space-4); }
.trust__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.trust__col li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); color: var(--ink-muted); font-size: .95rem; }
.trust__col li .icon { width: 20px; height: 20px; margin-top: 1px; }
.trust__col--yes li .icon { color: var(--success); }
.trust__col--no li .icon { color: var(--ink-subtle); }
@media (min-width: 768px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .trust__col { padding: var(--space-6); } }
.cta-band { position: relative; overflow: hidden; display: grid; gap: var(--space-5); align-items: center; padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); background: var(--band-bg); color: var(--band-ink); }
.cta-band::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, .16), transparent 70%); pointer-events: none; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--band-ink); margin: 0 0 var(--space-2); }
.cta-band p { color: var(--band-muted); margin: 0; }
.cta-band .button { background: #ffffff; color: #312e81; box-shadow: none; }
.cta-band .button:hover { background: #eef2ff; color: #312e81; }
.cta-band .button--outline { background: transparent; color: var(--band-ink); border-color: var(--band-line); }
.cta-band .button--outline:hover { background: rgba(255, 255, 255, .08); color: var(--band-ink); border-color: var(--band-ink); }
.cta-band :focus-visible { box-shadow: 0 0 0 2px #312e81, 0 0 0 4px #ffffff; }
@media (min-width: 900px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-7) 56px; } }

/* ---------- Events ---------- */
.event-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); }
.event-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.event-card__date, .event-row__date { display: grid; place-content: center; text-align: center; height: 68px; border-radius: var(--radius); background: var(--brand-50); color: var(--brand-700); line-height: 1.05; }
.event-card__date span, .event-row__date span { font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.event-card__date strong, .event-row__date strong { font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.event-card__body { display: grid; gap: 6px; min-width: 0; }
.event-card__title, .event-row__title { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.event-card__title a { color: var(--ink); text-decoration: none; }
.event-card__title a:hover { color: var(--brand-700); text-decoration: underline; }
.event-card__meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); margin: 0; font-size: var(--text-small); color: var(--ink-muted); }
.event-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.event-card__meta .icon { width: 16px; height: 16px; color: var(--ink-subtle); }
.event-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-2); }
@media (max-width: 399px) { .event-card { grid-template-columns: minmax(0, 1fr); } .event-card__date { grid-auto-flow: column; gap: 8px; justify-content: start; height: auto; padding: 6px 12px; place-content: center start; width: max-content; } .event-card__date strong { font-size: 1.1rem; } .event-card__actions .button { width: 100%; } }
@media (min-width: 768px) { .event-card { grid-template-columns: 76px minmax(0, 1fr); padding: var(--space-5); gap: var(--space-5); } .event-card__date { height: 80px; } }
/* Compact event rows (home) */
.event-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color var(--ease), box-shadow var(--ease); }
.event-row .event-row__date { height: 60px; }
.event-row .event-row__date strong { font-size: 1.3rem; }
a.event-row:hover { border-color: color-mix(in srgb, var(--brand-700) 55%, var(--line)); box-shadow: var(--shadow-md); color: inherit; }
.event-row__body { display: grid; gap: 2px; min-width: 0; }
.event-row > .icon { color: var(--ink-subtle); }
.view-tabs { display: flex; gap: 4px; margin: 0 0 var(--space-5); padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); width: max-content; max-width: 100%; overflow-x: auto; }
.view-tabs a { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 9px; text-decoration: none; color: var(--ink-muted); font-weight: 600; font-size: .92rem; }
.view-tabs a:hover { color: var(--ink); }
.view-tabs a[aria-current="page"] { background: var(--btn); color: #fff; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: var(--text-caption); font-weight: 650; border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); line-height: 1.6; white-space: nowrap; }
.badge .icon { width: 14px; height: 14px; }
.badge--type { background: var(--brand-50); color: var(--brand-700); border-color: transparent; }
.badge--coming-soon { background: var(--surface-2); color: var(--ink-muted); }
.badge--available, .badge--active { color: var(--success); background: var(--success-50); border-color: transparent; }
.badge--recommended { color: var(--accent); background: var(--accent-50); border-color: transparent; }
.badge--inactive { color: var(--ink-muted); }
.badge--suspended, .badge--invalid { color: var(--danger); background: var(--danger-50); border-color: transparent; }
.badge--duplicate, .badge--needs_review { color: var(--warning); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-2); max-width: 520px; }
.form label { font-weight: 600; font-size: .95rem; }
.form .button { justify-self: start; margin-top: var(--space-2); }
.field { display: grid; gap: 6px; align-content: start; margin-bottom: var(--space-4); min-width: 0; }
.field label { font-weight: 600; font-size: .9rem; }
.field__optional { font-weight: 450; color: var(--ink-subtle); }
.field__help { font-size: var(--text-small); color: var(--ink-muted); margin: 0; }
.field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-small); font-weight: 550; color: var(--danger); margin: 0; }
.field-row { display: grid; gap: 0 var(--space-4); align-items: start; }
@media (min-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field-row--phone { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) { .field-row--phone { grid-template-columns: 10rem minmax(0, 1fr); } }
input, select, textarea {
    font: inherit; font-size: 16px; min-height: 46px; width: 100%; max-width: 100%;
    padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); transition: border-color var(--ease), box-shadow var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-subtle); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-subtle); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--btn); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-700); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-700) 25%, transparent); }
[aria-invalid="true"] { border-color: var(--danger); }
[aria-invalid="true"]:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.filters input, .filters select, .inline-form select { width: auto; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); display: grid; gap: var(--space-2); }
.check { display: flex; gap: var(--space-2); align-items: baseline; font-weight: 500 !important; }
.form-section { border: 0; padding: 0; margin: 0 0 var(--space-3); display: block; min-width: 0; }
.form-section legend { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); padding: 0; margin-bottom: var(--space-3); width: 100%; display: flex; align-items: center; gap: var(--space-3); }
.form-section legend::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 84px; }
.password-toggle { position: absolute; right: 3px; top: 3px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--brand-700); font: inherit; font-size: var(--text-small); font-weight: 600; cursor: pointer; }
.password-toggle:hover { background: var(--surface-2); }
.password-toggle[hidden] { display: none; }

/* ---------- Auth (sign in, register, verify): form + illustration panel ---------- */
.auth-shell { min-height: calc(100vh - var(--header-h)); padding: var(--space-5) 0 var(--space-8); background: radial-gradient(50% 60% at 100% 0%, var(--glow-1), transparent 70%), radial-gradient(40% 50% at 0% 100%, var(--glow-2), transparent 70%), var(--surface-alt); }
.auth-split { display: grid; max-width: 1040px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.auth-split--narrow { max-width: 920px; }
.auth-split__form { padding: var(--space-5) var(--space-4); min-width: 0; }
.auth-split__art { display: none; }
.auth-split__form > .auth-card__head > .logo { display: none; }
@media (min-width: 400px) { .auth-split__form { padding: var(--space-6) var(--space-5); } }
@media (min-width: 900px) {
    .auth-shell { padding: var(--space-7) 0 var(--space-9); }
    .auth-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .auth-split--narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .auth-split__form { padding: var(--space-7) 56px; }
    .auth-split__form > .auth-card__head > .logo { display: inline-flex; margin-bottom: var(--space-5); }
    .auth-split__art { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-7) var(--space-6); background: radial-gradient(70% 60% at 100% 100%, var(--glow-3), transparent 70%), radial-gradient(60% 50% at 0% 0%, var(--glow-2), transparent 70%), var(--surface-2); border-left: 1px solid var(--line); }
}
.auth-split__art h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; }
.auth-art { margin-top: auto; position: relative; }
.auth-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.auth-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-weight: 550; }
.auth-checks li .icon { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--success-50); color: var(--success); }
.auth-checks li .muted { display: block; font-weight: 400; font-size: var(--text-small); }
.auth-card { width: 100%; max-width: 560px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-md); }
.auth-card--narrow { max-width: 460px; }
.auth-card h1, .auth-split h1 { font-size: clamp(1.6rem, 1.35rem + 1vw, 2rem); margin-bottom: var(--space-2); }
.auth-card__head { margin-bottom: var(--space-5); }
.auth-card__head p { margin: 0; }
.auth-card__head > .logo { margin-bottom: var(--space-4); }
.auth-card__foot { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--text-small); text-align: center; }
@media (min-width: 640px) { .auth-card { padding: var(--space-6); } }
.auth-card .form, .auth-card form, .auth-split form { max-width: none; }
.dev-box { border: 2px dashed var(--warning); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; background: var(--warning-50); }
.dev-box code { font-size: 1.1rem; font-weight: 700; letter-spacing: .1em; }

/* Decorative composition used in auth panels and the How it works CTA (no people, no fake data) */
.art-stack { position: relative; display: grid; gap: var(--space-3); }
.art-stack .float-chip { position: static; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); font-size: .82rem; line-height: 1.3; max-width: 260px; }
.art-stack .float-chip strong { display: block; color: var(--ink); font-size: .88rem; }
.art-stack .float-chip span { color: var(--ink-muted); }
.art-stack .float-chip .tile { width: 34px; height: 34px; border-radius: 10px; }
.art-stack .float-chip:nth-child(2) { margin-left: 48px; }
.art-stack .float-chip:nth-child(3) { margin-left: 18px; }

/* ---------- Alerts ---------- */
.alert { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin: var(--space-3) 0; border: 1px solid transparent; }
.alert ul { margin: 0; padding-left: 18px; }
.alert--ok, .alert--success { background: var(--success-50); color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.alert--error { background: var(--danger-50); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert--info { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }

/* ---------- Student portal ---------- */
.portal-main { padding: var(--space-6) 0 calc(var(--space-8) + 24px); }
.tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 10px; min-height: 56px; font-size: .72rem; font-weight: 600; color: var(--ink-muted); text-decoration: none; }
.tabbar a[aria-current="page"] { color: var(--brand-700); box-shadow: inset 0 2px 0 var(--brand-700); }
.tabbar .icon { width: 22px; height: 22px; }
@media (min-width: 900px) { .tabbar { display: none; } .portal-main { padding-bottom: var(--space-8); } }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-5); padding: 0; list-style: none; }
.facts li { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: var(--text-small); }
.facts strong { font-weight: 650; }
.empty-state { text-align: center; padding: var(--space-7) var(--space-4); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty-state .icon { width: 36px; height: 36px; color: var(--ink-muted); }
/* Guided empty state: explains why it's empty and offers useful next steps. */
.empty-guide { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.empty-guide__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--tone-indigo-bg); color: var(--tone-indigo); }
.empty-guide__icon .icon { width: 28px; height: 28px; }
.empty-guide h2 { font-size: 1.35rem; margin-bottom: var(--space-2); }
.empty-guide__body > p { color: var(--ink-muted); max-width: 56ch; }
.empty-guide__next { list-style: none; margin: 0; padding: var(--space-4); display: grid; gap: var(--space-4); background: var(--surface-2); border-radius: var(--radius-lg); }
.empty-guide__next li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); font-size: var(--text-small); color: var(--ink-muted); align-items: start; }
.empty-guide__next .tile { width: 36px; height: 36px; border-radius: 10px; }
.empty-guide__next .tile .icon { width: 18px; height: 18px; }
.empty-guide__next strong { color: var(--ink); display: block; font-size: .95rem; }
@media (min-width: 900px) { .empty-guide { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; padding: var(--space-7) var(--space-6); gap: var(--space-6); } }
.chip-nav { display: inline-flex; gap: 4px; flex-wrap: wrap; margin: 0 0 var(--space-5); padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.chip-nav a { padding: 8px 16px; border-radius: 9px; text-decoration: none; color: var(--ink-muted); font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; }
.chip-nav a:hover { color: var(--ink); }
.chip-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- Tool groups (activities, career tools) ---------- */
.tool-group + .tool-group { margin-top: var(--space-7); }
.tool-group__head { display: grid; gap: 4px; margin-bottom: var(--space-4); max-width: 640px; }
.tool-group__head h2 { font-size: 1.3rem; margin: 0; }
.tool-group__head p { margin: 0; color: var(--ink-muted); font-size: var(--text-small); }
.note { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-small); color: var(--ink-muted); padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.note .icon { color: var(--brand-700); margin-top: 1px; }
.soon-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius-lg); background: radial-gradient(60% 120% at 100% 0%, var(--glow-3), transparent 70%), var(--surface-2); border: 1px solid var(--line); }
.soon-panel h2, .soon-panel h3 { font-size: 1.1rem; margin: 0 0 4px; }
.soon-panel p { margin: 0; color: var(--ink-muted); font-size: var(--text-small); }

/* ---------- Editorial blocks (About) ---------- */
.statement { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); font-weight: 650; line-height: 1.35; letter-spacing: -.02em; max-width: 30ch; margin: 0; }
.split-2 { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .split-2 { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; } .split-2 > .sticky { position: sticky; top: calc(var(--header-h) + 32px); } }
.feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.feature-grid li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.feature-grid h3 { margin: var(--space-2) 0 0; font-size: 1.1rem; }
.feature-grid p { margin: 0; color: var(--ink-muted); font-size: .95rem; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Page with a side panel (How it works) */
.with-aside { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .with-aside { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: var(--space-8); } .with-aside > aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } }
.start-card { display: grid; gap: var(--space-5); align-items: center; margin-top: var(--space-7); padding: var(--space-5); border-radius: var(--radius-xl); background: radial-gradient(60% 120% at 100% 100%, var(--glow-3), transparent 70%), radial-gradient(50% 100% at 0% 0%, var(--glow-2), transparent 70%), var(--surface); border: 1px solid var(--line); }
.start-card h2 { font-size: 1.35rem; margin: 0 0 var(--space-2); }
.start-card p { color: var(--ink-muted); margin: 0 0 var(--space-4); }
.start-card .art-stack { display: none; }
@media (min-width: 768px) { .start-card { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-6); } .start-card .art-stack { display: grid; } }

/* ---------- Simple centred pages (errors, foundation) ---------- */
.page { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.page > .card { width: 100%; max-width: 480px; padding: var(--space-6); }
.status-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.status-row { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; }
.status-dot--ok { background: var(--success); }
.status-dot--fail { background: var(--danger); }
.trace { overflow-x: auto; font-size: 12px; background: var(--surface-alt); padding: 12px; border-radius: 8px; }

/* ---------- Admin (denser use of the same system) ---------- */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .logo { font-size: .98rem; }
.topbar .logo__mark { width: 28px; height: 28px; }
.topnav { display: flex; flex-wrap: wrap; gap: 14px; flex: 1; }
.topnav a { color: var(--ink-muted); text-decoration: none; font-weight: 550; }
.topnav a:hover { color: var(--brand-700); }
.logout { display: flex; align-items: center; gap: 10px; margin: 0; }
.content { max-width: 1120px; margin: 0 auto; padding: 20px 16px 48px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin: 16px 0; }
.filters, .inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; align-items: center; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: block; overflow-x: auto; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 13px; color: var(--ink-muted); font-weight: 600; }
.table--compact td { font-size: 13px; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.details dt { color: var(--ink-muted); }
.details dd { margin: 0; word-break: break-word; }
.empty { color: var(--ink-muted); padding: 24px 0; }
.m-0 { margin: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }


/* --- Milestone 6: student profile, settings, recommendations --- */
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-700); text-decoration: underline; cursor: pointer; }
.link-button:focus-visible { outline: 3px solid var(--focus, var(--brand-700)); outline-offset: 2px; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.correction { padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.correction:first-child { border-top: 0; }
.badge--pending, .badge--unverified { color: var(--warning); }
.badge--applied, .badge--verified { color: var(--success); background: var(--success-50); border-color: transparent; }
.badge--rejected { color: var(--ink-muted); }
.badge--managed { color: var(--brand-700); background: var(--brand-50); border-color: transparent; }
.welcome { margin-bottom: var(--space-4); }
.welcome__line { margin: 2px 0 0; font-weight: 600; }
.completion__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.completion__head h2 { font-size: 1.15rem; }
.completion__bar { display: block; width: 100%; height: 10px; margin: var(--space-3) 0; border: 0; border-radius: 999px; background: var(--surface-alt); overflow: hidden; accent-color: var(--brand-700); }
.completion__bar::-webkit-progress-bar { background: var(--surface-alt); border-radius: 999px; }
.completion__bar::-webkit-progress-value { background: var(--brand-700); border-radius: 999px; }
.completion__bar::-moz-progress-bar { background: var(--brand-700); border-radius: 999px; }
.checklist { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 6px; }
@media (min-width: 640px) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); }
.checklist .icon { width: 18px; height: 18px; flex: none; }
.checklist__done { color: var(--success); }
.checklist__todo { color: var(--ink-muted); }
.card__reasons { margin: var(--space-2) 0 0; padding-left: 18px; font-size: var(--text-small); color: var(--ink); }
.chip-group { border: 0; margin: 0 0 var(--space-5); padding: 0; min-width: 0; }
.chip-group legend { font-weight: 650; padding: 0; margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: var(--text-small); font-weight: 550; }
.chip input:checked + span { background: var(--btn); border-color: var(--btn); color: var(--on-brand); }
.chip input:checked + span::before { content: "✓ "; white-space: pre; }
.chip input:focus-visible + span { outline: 3px solid var(--brand-700); outline-offset: 2px; }
.check-field { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.check-field input { width: 20px; height: 20px; accent-color: var(--brand-700); }
.check-field label { font-weight: 600; }
.check-field .field__help { grid-column: 2; }
@media (max-width: 479px) { .details { grid-template-columns: 1fr; gap: 2px 0; } .details dd { margin-bottom: var(--space-2); } }
@media (min-width: 900px) and (max-width: 1099px) { .site-header--student .logo__text { display: none; } }

/* --- Milestone 7: staff CRM --- */
.content--wide { max-width: 1320px; }
.stats { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.stat > a, .stat > span:first-child { display: block; }
.stat a, .stat { color: var(--ink); text-decoration: none; }
.stat a, .stat > .stat__value { padding: 12px 14px; }
.stat a:hover { background: var(--surface-alt); border-radius: var(--radius-lg); }
.stat__value { display: block; font-size: 1.6rem; font-weight: 750; line-height: 1.2; }
.stat__label { display: block; font-size: var(--text-small); color: var(--ink-muted); padding: 0 14px 12px; }
.stat a .stat__label { padding: 0; }
.stat--accent { border-color: var(--brand-700); }
.stat--warn { border-color: var(--warning); }
.split { display: grid; gap: 0 16px; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .table { display: table; min-width: 640px; }
.table--crm td, .table--crm th { white-space: normal; }
.col-check { width: 36px; }
.col-check input { width: 18px; height: 18px; min-height: 0; }
.filters--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; align-items: center; }
.filters--grid input[type="search"] { grid-column: 1 / -1; }
@media (min-width: 900px) { .filters--grid input[type="search"] { grid-column: span 2; } }
.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin: 8px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); position: sticky; top: 0; z-index: 5; }
.bulk-bar__field { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.bulk-bar input[type="text"] { width: auto; flex: 1 1 180px; }
.bulk-bar select { width: auto; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 12px 0; }
.pager__links { display: flex; gap: 14px; }
.crm-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 650; border: 1px solid var(--line); white-space: nowrap; }
.crm-status--info { color: var(--brand-700); background: var(--brand-50); border-color: transparent; }
.crm-status--good { color: var(--success); background: var(--success-50); border-color: transparent; }
.crm-status--warn { color: var(--warning); }
.crm-status--bad { color: var(--danger); background: var(--danger-50); border-color: transparent; }
.crm-status--muted { color: var(--ink-muted); }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { padding: 10px 0 10px 14px; border-left: 2px solid var(--line); margin-left: 4px; }
.timeline__note { white-space: pre-wrap; margin: 6px 0 0; padding: 8px 10px; background: var(--surface-alt); border-radius: var(--radius); }
.subfields { border: 1px dashed var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 12px; }
.subfields legend { font-weight: 600; padding: 0 4px; }
@media (min-width: 900px) { .field-row--3 { grid-template-columns: 1fr 1fr 1fr; } }
textarea { font: inherit; width: 100%; }
.chip-button { font: inherit; font-size: var(--text-small); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; min-height: 32px; }
.text-warn { color: var(--warning); font-weight: 600; }
.confirm__list { margin: 12px 0; }

/* --- Milestone 8: campaigns --- */
.campaign-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 650; border: 1px solid var(--line); white-space: nowrap; }
.campaign-status--active { color: var(--success); background: var(--success-50); border-color: transparent; }
.campaign-status--scheduled, .campaign-status--paused { color: var(--warning); }
.campaign-status--draft { color: var(--ink-muted); }
.campaign-status--completed, .campaign-status--archived { color: var(--ink-muted); background: var(--surface-alt); }
.field__label { font-weight: 600; font-size: .95rem; }
.copy-input { font-size: 13px; min-height: 36px; padding: 6px 8px; flex: 1 1 220px; min-width: 0; }
.link-cell { display: flex; gap: 6px; align-items: center; min-width: 320px; }
.recipient { padding: 12px 14px; margin: 10px 0; }
.recipient__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.recipient__link { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--line); }
.recipient__link > span { flex: 0 0 100%; }
form.inline { display: inline; margin: 0; }
.preview-count { font-size: 1.2rem; margin: 0 0 6px; }
details.variant > summary { cursor: pointer; }
.checklist--steps { grid-template-columns: 1fr; }

/* Events (M9) */
.checkbox { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; }
.checkbox input { width: auto; min-height: 0; }
.stack-sm { display: grid; gap: 6px; margin-top: 6px; min-width: 180px; }
.stack-sm input, .stack-sm select { width: 100%; }
.text-success { color: var(--success); font-weight: 600; }
.prose p { max-width: 68ch; }
.event-page { max-width: 1040px; }
.event-card__title { font-size: 1.15rem; margin: 0; }
.event-action { align-self: start; }
.event-action form { margin: 12px 0; }
.event-history > li { padding: 12px 16px; margin: 0 0 10px; }
.event-status--registration_open, .event-status--live { color: var(--success); background: var(--success-50); border-color: transparent; }
.event-status--scheduled, .event-status--registration_closed { color: var(--warning); }
.event-status--draft { color: var(--ink-muted); }
.event-status--completed, .event-status--archived { color: var(--ink-muted); background: var(--surface-alt); }
.event-status--cancelled { color: var(--danger); background: var(--danger-50); border-color: transparent; }
.reg-status { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .78rem; font-weight: 650; border: 1px solid var(--line); white-space: nowrap; }
.reg-status--attended { color: var(--success); background: var(--success-50); border-color: transparent; }
.reg-status--partial { color: var(--warning); }
.reg-status--absent, .reg-status--cancelled { color: var(--ink-muted); background: var(--surface-alt); }
.reg-status--registered { color: var(--brand-700); background: var(--brand-50); border-color: transparent; }
.badge--matched, .badge--walk_in { color: var(--success); background: var(--success-50); border-color: transparent; }
.badge--possible, .badge--unmatched { color: var(--warning); }

/* FY Duo (M10) */
.button--large { min-height: 52px; padding: 12px 24px; font-size: 1.05rem; }
.duo-hero { padding: var(--space-7) 0 var(--space-6); background: radial-gradient(60% 120% at 100% 0%, var(--glow-1), transparent 60%), radial-gradient(40% 90% at 85% 100%, var(--glow-3), transparent 70%), var(--surface-alt); border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .duo-hero { padding: var(--space-8) 0 var(--space-7); } }
.duo-hero__title { font-size: var(--text-display); line-height: 1.1; margin: var(--space-2) 0 var(--space-4); }
.duo-hero__cta { margin-top: var(--space-5); display: grid; gap: var(--space-3); justify-items: start; }
.duo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
@media (min-width: 720px) { .duo-steps { grid-template-columns: repeat(3, 1fr); } }
.duo-steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-1); }
.duo-steps li::before { content: counter(step); width: 32px; height: 32px; border-radius: 50%; background: var(--btn); color: var(--on-brand); display: inline-grid; place-items: center; font-weight: 700; }
.duo-card { border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); margin: var(--space-4) 0; border: 1px solid var(--line); display: grid; gap: var(--space-2); }
.duo-card .icon { width: 36px; height: 36px; }
.duo-card--waiting { background: var(--surface-alt); }
.duo-card--partner { background: var(--brand-50); border-color: var(--brand-100); }
.duo-banner { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding: var(--space-5); margin: var(--space-4) 0; border-radius: var(--radius-lg); background: radial-gradient(60% 140% at 100% 0%, var(--glow-1), transparent 70%), var(--surface); border: 1px solid color-mix(in srgb, var(--brand-700) 45%, var(--line)); box-shadow: var(--shadow-md); }
.duo-banner h2 { font-size: 1.25rem; }
.duo-form { display: grid; gap: var(--space-2); }
.duo-optional { margin: var(--space-3) 0; }
.duo-optional summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
ul.chips { list-style: none; padding: 0; }
.chip-static { padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: var(--text-small); }
.pre-line { white-space: pre-line; }
@media (max-width: 400px) { .duo-hero__cta .button, .duo-banner .button { width: 100%; justify-content: center; } }

/* FY challenge results (M11) */
.result-card { text-align: center; justify-items: center; }
.result-card__trophy, .winner-card__icon { font-size: 2.5rem; margin: 0; line-height: 1; }
.result-card__score { font-size: 1.25rem; margin: var(--space-3) 0 0; }
.result-card__score strong { font-size: 2.5rem; }
.winner-card { text-align: center; align-items: center; }
.winner-card--winner { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: var(--shadow-md); }
.rubric-row input + input { margin-top: 6px; }

/* M12: journey, follow-up queue, funnel */
.text-danger { color: var(--danger); }
.journey__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.journey__steps > li { position: relative; padding-left: 22px; }
.journey__steps > li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); }
.journey__steps > li.is-done::before { border-color: var(--accent); background: var(--accent); }
.journey__steps > li.is-warn::before { border-color: var(--warning); }
.journey__label { display: inline-block; min-width: 96px; font-weight: 600; }
.queue { display: grid; gap: var(--space-2); }
.queue__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); background: var(--surface); }
.queue__row--p1 { border-left-color: var(--danger); }
.queue__row--p2 { border-left-color: var(--warning); }
.queue__row--p3 { border-left-color: var(--accent); }
.queue__main { min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.queue__action { flex: 0 0 auto; }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.funnel > li { display: grid; gap: 4px; }
.funnel__bar { width: 100%; height: 10px; appearance: none; border: 0; border-radius: 99px; background: var(--line); overflow: hidden; }
.funnel__bar::-webkit-progress-bar { background: var(--line); border-radius: 99px; }
.funnel__bar::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.funnel__bar::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.queue__main { display: grid; gap: 2px; text-decoration: none; color: var(--ink); }
.queue__main strong { color: var(--brand-700); }
.queue__main:hover strong { text-decoration: underline; }
.queue__main .queue__action { font-weight: 600; }
@media (max-width: 640px) { .topnav { flex-basis: 100%; gap: 8px 16px; } }
.table--nowrap-head th { white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* M13: FY Duo landing facts + 5-step strip */
.section--tight { padding-top: var(--space-5); padding-bottom: 0; }
.section--flush { padding-top: 0; }
.facts__label { color: var(--ink-muted); margin-right: 6px; }
.facts__value { font-weight: 650; }
@media (min-width: 720px) { .duo-steps { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.duo-banner .button-row { flex-shrink: 0; }

/* M13: grouped staff navigation (no JS: <details>) */
.topnav { align-items: center; }
.navgroup { position: relative; }
.navgroup > summary { list-style: none; cursor: pointer; color: var(--ink-muted); font-weight: 550; display: inline-flex; align-items: center; gap: 4px; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after { content: "▾"; font-size: .8em; }
.navgroup[open] > summary { color: var(--brand-700); }
.navgroup__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 200px; display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.navgroup__panel a { padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.navgroup__panel a:hover { background: var(--surface-alt); }
@media (max-width: 640px) {
    .navgroup__panel { position: static; box-shadow: none; margin-top: 6px; min-width: 0; }
    .navgroup[open] { flex-basis: 100%; }
}
.queue__contact { display: flex; gap: 6px; flex: 0 0 auto; }
.list-plain.prose li + li { margin-top: var(--space-2); }
.rules-inline { margin: 0 0 var(--space-3); } .rules-inline > summary { cursor: pointer; color: var(--brand-700); font-weight: 600; }


/* Student portal header: its nav shows from 900px (the bottom tab bar covers phones and tablets). */
@media (min-width: 900px) { .site-header--student .nav { display: flex; gap: 0; margin-left: var(--space-5); } }

/* M15: one-time link box, request fields on registration, settings forms */
.input-block { width: 100%; font-family: var(--font-mono, ui-monospace, monospace); }
.request-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.request-box[hidden], [data-college-request][hidden], [data-branch-request][hidden] { display: none; }
.request-box > p { margin-bottom: var(--space-3); }