/* ------------------------------------------------------------------ */
/*  Degree Audit · Phase-1 stylesheet                                 */
/* ------------------------------------------------------------------ */
:root {
    /* Cursio 2.0 design system — warm cream + navy + terracotta accent.
       Legacy --c-* names are mapped onto the new palette so the whole app
       re-skins through the theme layer; the design's own token names
       (--bg, --accent, --navy, --text…) are aliased below for new markup. */
    --c-bg: #FAF8F4;
    --c-surface: #FFFFFF;
    --c-surface-2: #F4F1EA;
    --c-surface-3: #ECE6DB;
    --c-border: #E9E3D8;
    --c-border-strong: #D9D1C2;
    --c-text: #1B2331;
    --c-muted: #5B6477;
    --c-subtle: #919AA9;
    --c-primary: #D9663E;          /* terracotta — interactive / CTA / active */
    --c-primary-strong: #C2542F;
    --c-primary-active: #C2542F;
    --c-accent: #16223D;           /* navy — deep secondary brand */
    --c-success: #2E7D5B;
    --c-warning: #B9821C;
    --c-error: #C0443A;
    --c-info: #2C6CB4;
    --c-danger: #C0443A;
    /* Brand spine. */
    --brand-navy: #16223D;
    --brand-cyan: #D9663E;
    --brand-gradient: linear-gradient(135deg, #16223D 0%, #22335A 100%);
    /* Status triads (bg / fg / border). */
    --ok-bg: #E4F1EA;   --ok-fg: #1F5E43;   --ok-bd: #C9E4D5;
    --warn-bg: #F8EFD9; --warn-fg: #8A6212; --warn-bd: #EBDCB4;
    --bad-bg: #F9E7E4;  --bad-fg: #9B362E;  --bad-bd: #F0CFC9;
    --info-bg: #E6EFF9; --info-fg: #245B95; --info-bd: #CADEF3;
    --brand-soft-bg: #FBEDE6; --brand-soft-fg: #C2542F; --brand-soft-bd: #F2D8CB;
    /* Soft + accent extensions. */
    --c-primary-soft: #FBEDE6;
    --c-accent-strong: #22335A;
    /* Warm neutral scale. */
    --neutral-50: #FAF8F4;  --neutral-100: #F4F1EA; --neutral-200: #E9E3D8;
    --neutral-300: #D9D1C2; --neutral-400: #919AA9; --neutral-500: #5B6477;
    --neutral-600: #5B6477; --neutral-700: #3A4253; --neutral-800: #22335A;
    --neutral-900: #1B2331;
    /* Typography families. */
    --font-sans: 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Plus Jakarta Sans', var(--font-sans);
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --font-serif: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
    /* Sidebar — navy gradient, light translucent items. */
    --side-grad: linear-gradient(176deg, #16223D 0%, #101A30 100%);
    --sidebar-bg: var(--side-grad);
    --sidebar-text: rgba(233,238,247,.62);
    --sidebar-text-muted: rgba(233,238,247,.40);
    --sidebar-item-hover-bg: rgba(255,255,255,.06);
    --sidebar-item-active-bg: rgba(255,255,255,.10);
    --sidebar-border: rgba(255,255,255,.08);
    --sidebar-role-bg: rgba(255,255,255,.08);
    --sidebar-role-fg: #FFFFFF;
    --sidebar-role-bd: rgba(255,255,255,.14);
    /* New-design token aliases (so components copied from Cursio.dc.html work). */
    --bg: var(--c-bg); --surface: var(--c-surface); --surface-2: var(--c-surface-2); --surface-3: var(--c-surface-3);
    --border: var(--c-border); --border-strong: var(--c-border-strong);
    --text: var(--c-text); --text-2: var(--c-muted); --text-3: var(--c-subtle);
    --navy: #16223D; --navy-2: #22335A; --navy-tint: #EAEDF4;
    --accent: #D9663E; --accent-2: #C2542F; --accent-soft: #FBEDE6;
    --success-soft: var(--ok-bg); --warning-soft: var(--warn-bg); --danger-soft: var(--bad-bg); --info-soft: var(--info-bg);
    --side-text: var(--sidebar-text); --side-active: #FFFFFF; --side-hover: var(--sidebar-item-hover-bg);
    --side-activebg: var(--sidebar-item-active-bg); --side-border: var(--sidebar-border); --side-muted: var(--sidebar-text-muted);
    /* Motion. */
    --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --ease-rise: cubic-bezier(.2, .75, .25, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --press-translate: translateY(0.5px);
    --lift-shadow: 0 4px 14px rgba(27, 35, 49, .07), 0 2px 6px rgba(27, 35, 49, .05);
    --focus-ring: 0 0 0 3px rgba(217, 102, 62, 0.30);
    --r-xs: 7px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-full: 999px;
    --shadow-1: 0 1px 2px rgba(27, 35, 49, .06), 0 1px 3px rgba(27, 35, 49, .05);
    --shadow-2: 0 4px 14px rgba(27, 35, 49, .07), 0 2px 6px rgba(27, 35, 49, .05);
    --shadow-3: 0 18px 48px rgba(20, 28, 46, .16), 0 4px 12px rgba(20, 28, 46, .08);
    --shadow-4: 0 22px 54px rgba(20, 28, 46, .20);          /* search palette */
    --shadow-sm: var(--shadow-1); --shadow-md: var(--shadow-2); --shadow-lg: var(--shadow-3);
    --space: 16px;
    /* Design-system spacing scale (4px grid). */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
    --space-10: 40px; --space-12: 48px; --space-16: 64px;
    /* Layout dimensions. */
    --sidebar-padding: 16px 12px;
    --topbar-height: 60px;
    --content-padding: 24px 28px;
    --content-padding-mobile: 16px 14px;
    /* Minimum touch targets (WCAG 2.5.8). */
    --tap-target: 44px;
    --tap-target-sm: 36px;
    /* Z-index scale. */
    --z-popover: 1000;
    --z-overlay: 1090;
    --z-sidebar: 1100;
    --z-modal: 9998;
    --z-toast: 9999;
    /* Extended motion tokens. */
    --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --dur-instant: 80ms;
    --dur-slow: 280ms;
    --transition-colors: color var(--dur-fast) var(--ease-standard),
                         background-color var(--dur-fast) var(--ease-standard),
                         border-color var(--dur-fast) var(--ease-standard);
    --transition-all: all var(--dur-fast) var(--ease-standard);
    --lift-translate: translateY(-2px);
    --r-none: 0px;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 13px;
    --text-base: 14px;
    color-scheme: light;
}

[data-theme="dark"] {
    /* Cursio 2.0 dark — deep navy surfaces, warm terracotta accent. */
    --c-bg: #0E1626;
    --c-surface: #15203A;
    --c-surface-2: #1A2745;
    --c-surface-3: #223255;
    --c-border: #27365A;
    --c-border-strong: #35487A;
    --c-text: #E9EEF8;
    --c-muted: #9DA9C2;
    --c-subtle: #6C7997;
    --c-primary: #E5825C;
    --c-primary-strong: #D9663E;
    --c-primary-active: #D9663E;
    --c-primary-soft: #33231B;
    --c-accent: #0B1322;
    --c-accent-strong: #22335A;
    /* Status triads — dark. */
    --ok-bg: #16291F;  --ok-fg: #46B488;  --ok-bd: #1F5E43;
    --warn-bg: #2C2412; --warn-fg: #D7A23E; --warn-bd: #6A540F;
    --bad-bg: #2E1A18;  --bad-fg: #E26A60;  --bad-bd: #7A322B;
    --info-bg: #13243C; --info-fg: #5C9AE0; --info-bd: #2B527F;
    --brand-soft-bg: #33231B; --brand-soft-fg: #E5825C; --brand-soft-bd: #5A3A29;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .32);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, .36);
    --shadow-3: 0 22px 54px rgba(0, 0, 0, .5);
    --shadow-4: 0 22px 54px rgba(0, 0, 0, .6);
    --lift-shadow: 0 6px 18px rgba(0, 0, 0, .36);
    --focus-ring: 0 0 0 3px rgba(229, 130, 92, 0.40);
    /* Sidebar — deeper navy gradient. */
    --side-grad: linear-gradient(176deg, #0C1426 0%, #070D18 100%);
    --sidebar-text: rgba(213,222,238,.58);
    --sidebar-text-muted: rgba(213,222,238,.36);
    --sidebar-item-hover-bg: rgba(255,255,255,.05);
    --sidebar-item-active-bg: rgba(255,255,255,.08);
    --sidebar-border: rgba(255,255,255,.06);
    /* New-design alias overrides for dark. */
    --navy: #0B1322; --navy-2: #22335A; --navy-tint: #1A2745;
    --accent: #E5825C; --accent-2: #D9663E; --accent-soft: #33231B;
    color-scheme: dark;
}
[data-theme="dark"] body { background: var(--c-bg); color: var(--c-text); }
[data-theme="dark"] .topbar { background: var(--c-surface); border-bottom-color: var(--c-border); color: var(--c-text); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
    background: var(--c-surface); color: var(--c-text); border-color: var(--c-border);
}
/* Sidebar, badges, and alerts derive their dark colors from the --sidebar-*
   and status-triad tokens above — no per-component dark overrides needed. */
[data-theme="dark"] .table tr:hover td { background: rgba(59,130,246,.08); }
[data-theme="dark"] .qr-frame { background: #fff; }                     /* QR codes need white bg to scan */
[data-theme="dark"] .recovery-list li { background: var(--c-surface-2); }
[data-theme="dark"] .secret-display { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text); }
[data-theme="dark"] .notif-unread { background: rgba(59,130,246,.10); }
[data-theme="dark"] .timeline-svg text { fill: #cbd5e1; }
[data-theme="dark"] .timeline-svg line[stroke="#e5e7eb"] { stroke: #243049; }
[data-theme="dark"] .readiness-meter { background: var(--c-surface-2); border-color: var(--c-border); }
[data-theme="dark"] .readiness-label { color: #f1f5f9; text-shadow: 0 0 6px rgba(0,0,0,0.6); }
[data-theme="dark"] .bar-fill { background: var(--c-primary); }
[data-theme="dark"] .dept-divider td { background: var(--c-surface-2); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
form { margin: 0; }
/* Card headings: kill the user-agent margin so views don't have to inline
   style="margin:0" on every <h2>/<h3>. Views that want extra space below a
   heading can still add it; this just removes the top margin that pushes
   the heading off the card. */
.card > h1, .card > h2, .card > h3, .card > h4,
.card > header h1, .card > header h2, .card > header h3, .card > header h4 {
    margin-top: 0;
}
/* Visually hidden but still in the a11y tree (used by .sr-only-controlled
   radios, screen-reader-only field hints, etc.). */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--c-text);
    background: var(--c-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--c-muted); }

/* App shell */
.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 16px 12px; display: flex; flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid var(--sidebar-border);
}
.brand {
    display: flex; align-items: center; gap: 10px;
    color: #fff; font-weight: 600;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sidebar-border);
    letter-spacing: -0.01em;
}
.brand-name { font-size: 17px; }
.brand-mark { background: var(--brand-gradient); width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 4px 14px rgba(9, 168, 204, .35); }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
    color: var(--sidebar-text);
    padding: 8px 11px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.25;
    position: relative;
    transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav-item:hover { background: var(--sidebar-item-hover-bg); text-decoration: none; color: #fff; }
.nav-item .nav-icon { flex-shrink: 0; opacity: .7; transition: opacity var(--dur-fast); }
.nav-item:hover .nav-icon { opacity: 1; }
.nav-item-active,
.nav-item-active:hover {
    background: var(--sidebar-item-active-bg);
    color: #fff;
    font-weight: 600;
}
.nav-item-active .nav-icon { opacity: 1; color: #fff; }
.nav-item .nav-label { flex: 1; min-width: 0; }
.nav-section { color: var(--sidebar-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; padding: 16px 10px 6px; }

/* legacy — kept for the auth pages' "cancel" link in MFA challenge view */
.btn-link { background: none; border: none; color: #cbd5e1; cursor: pointer; padding: 6px 0; font: inherit; }
.btn-link:hover { color: #fff; }

/* Sidebar footer: theme + sign-out arrow with name/role underneath */
.sidebar-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sidebar-border); }
.sidebar-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.sidebar-user { padding: 0 4px; }
.sidebar-user-name { color: #f1f5f9; font-weight: 600; font-size: var(--text-base); line-height: 1.3; }
.sidebar-user-role {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 9px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--sidebar-role-fg);
    background: var(--sidebar-role-bg);
    border: 1px solid var(--sidebar-role-bd);
    border-radius: var(--r-full);
    letter-spacing: .02em;
}
.icon-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    color: #cbd5e1;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.icon-btn .theme-icon-dark { display: none; }
[data-theme="dark"] .icon-btn .theme-icon-dark { display: inline-block; }
[data-theme="dark"] .icon-btn .theme-icon-light { display: none; }
.signout-btn { margin-left: auto; }

.main { display: flex; flex-direction: column; }
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 28px; background: var(--c-surface); border-bottom: 1px solid var(--c-border);
    gap: 12px;
    /* Own stacking context above the content column so the notification
       bell popover (and quick-search) render over cards/tables, which now
       create their own stacking contexts via the cur-* entrance animations
       and sticky table headers. */
    position: relative; z-index: 100;
}
.page-title {
    margin: 0; font-size: 20px;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-pill { background: var(--c-surface-2); color: var(--c-muted); padding: 6px 10px; border-radius: 999px; font-size: var(--text-md); }
.content { padding: 24px 28px; }

/* Cards */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow-1); margin-bottom: 20px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card .stat-label { color: var(--c-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; }
.stat-card .stat-value { font-size: 28px; font-weight: 700; margin-top: 4px; }
.stat-card .stat-foot { color: var(--c-muted); font-size: var(--text-sm); margin-top: 6px; }
/* Clickable KPI tiles (dashboard) — same look as .stat-card, but with
   hover/focus affordances and no text-decoration since the whole card
   is the click target. */
a.stat-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.stat-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    border-color: var(--c-primary);
    text-decoration: none;
}
a.stat-card-link:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}
a.stat-card-link::after {
    content: "→";
    float: right;
    color: var(--c-muted);
    font-size: var(--text-base);
    transition: transform .12s ease, color .12s ease;
}
a.stat-card-link:hover::after { color: var(--c-primary); transform: translateX(3px); }

/* Department roster — collapsible advisor block on /department */
.dept-advisor-block { border: 1px solid var(--c-border); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; background: var(--c-surface); }
.dept-advisor-block summary { cursor: pointer; list-style: none; }
.dept-advisor-block summary::-webkit-details-marker { display: none; }
.dept-advisor-block summary > .badge { margin-left: 8px; }
.dept-advisor-block[open] { border-color: var(--c-primary); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 20px; }

/* Forms */
label { display: block; font-size: var(--text-md); color: var(--c-muted); margin-bottom: 12px; }
input[type=email], input[type=password], input[type=text], input[type=search], select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-sm);
    font-size: 16px; background: var(--c-surface); color: var(--c-text);
}
@media (min-width: 901px) {
    /* iOS auto-zooms when a focused input is <16px. Phones get 16px above.
       Desktop reverts to the denser 14px to match the rest of the UI. */
    input[type=email], input[type=password], input[type=text], input[type=search], select, textarea {
        font-size: var(--text-base);
    }
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--focus-ring); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px;
    border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); background: var(--c-surface);
    color: var(--c-text);
    font-size: var(--text-base); cursor: pointer; min-height: 40px;
    transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.btn:hover { background: var(--c-surface-2); }
.btn:active { transform: var(--press-translate); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-primary:hover { background: var(--c-primary-strong); border-color: var(--c-primary-strong); }
.btn-primary:active { background: var(--c-primary-active); border-color: var(--c-primary-active); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: var(--text-md); min-height: 34px; }
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.toolbar input[type=search] { max-width: 360px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--c-border); font-size: var(--text-base); }
.table th { color: var(--c-muted); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; }
.table tr:hover td { background: var(--c-surface-2); }
/* Optional explicit wrapper for very wide tables. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Responsive tables: on narrow screens let any data table scroll horizontally
   inside its card instead of overflowing the viewport. Applying this to the
   table element itself (display:block + overflow) means every existing
   `<table class="table">` becomes phone-friendly without touching markup. */
@media (max-width: 700px) {
    .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .table th, .table td { padding: 9px 10px; }
}
/* Bulk-action bar above a selectable list. */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 4px 14px; }
.bulk-bar .bulk-count { font-size: var(--text-sm); min-width: 72px; }
.bulk-bar input[type="text"], .bulk-bar select { padding: 7px 10px; }
.empty { color: var(--c-muted); text-align: center; padding: 24px; }

/* Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: var(--r-full); font-size: var(--text-sm); font-weight: 600; background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); line-height: 1.45; }
.badge-active, .badge-eligible { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.badge-near { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.badge-not_eligible, .badge-suspended, .badge-withdrawn { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.badge-probation { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.badge-graduated { background: var(--brand-soft-bg); color: var(--brand-soft-fg); border-color: var(--brand-soft-bd); }

/* Alerts */
.alert { padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 16px; border: 1px solid transparent; font-size: var(--text-base); }
.alert-error { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad-fg); }
.alert-info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info-fg); }

/* Auth */
.auth-page { background: linear-gradient(135deg,#1f4ed8 0%, #0ea5e9 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { background: #fff; padding: 32px; border-radius: var(--r-lg); width: 100%; max-width: 400px; box-shadow: var(--shadow-2); }
.auth-card h1 { margin: 0 0 20px; font-size: 22px; }
.auth-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--c-primary); font-weight: 600; }
.auth-links { margin-top: 16px; font-size: var(--text-md); }

/* Errors page */
.error-page { background: var(--c-bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.error-card { background: #fff; padding: 40px; border-radius: var(--r-lg); text-align: center; box-shadow: var(--shadow-2); max-width: 480px; }
.error-card h1 { font-size: 56px; margin: 0; color: var(--c-primary); }
.trace { background: #0b1220; color: #cbd5e1; padding: 12px; border-radius: var(--r-sm); font-size: var(--text-sm); max-height: 240px; overflow: auto; text-align: left; }

/* Audit summary */
.audit-summary header { display: flex; justify-content: space-between; align-items: center; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; margin-top: 16px; }
.kpis div { background: var(--c-surface-2); padding: 12px; border-radius: var(--r-sm); }
.kpi-label { color: var(--c-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; display: block; }
.kpi-value { font-size: 22px; font-weight: 600; margin-top: 4px; display: block; }
.course-list { list-style: none; padding: 0; margin: 0; }
.course-list li { padding: 8px 0; border-bottom: 1px solid var(--c-border); font-size: var(--text-base); }
.course-tick { display: inline-block; width: 16px; color: var(--c-success); font-weight: 700; }
.course-tick.muted { color: var(--c-muted); }

/* Planner launcher cards */
.planner-launcher-card { display: block; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.planner-launcher-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,.08); text-decoration: none; }
[data-theme="dark"] .planner-launcher-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.4); }

/* Bell popover */
.bell-wrap { position: relative; }
.bell { background: transparent; border: none; cursor: pointer; }
.bell-pop {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 360px; max-width: 90vw;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); box-shadow: 0 18px 40px rgba(15,23,42,.18);
    z-index: 1000; overflow: hidden;
}
[data-theme="dark"] .bell-pop { box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.bell-pop[hidden] { display: none; }
.bell-pop > header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--c-border); }
.bell-pop-body { max-height: 60vh; overflow: auto; }
.bell-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--c-border); color: var(--c-text); text-decoration: none; }
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: var(--c-surface-2); text-decoration: none; }
.bell-item.unread { background: rgba(59,130,246,.06); }
[data-theme="dark"] .bell-item.unread { background: rgba(59,130,246,.10); }
.bell-item-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 4px; }

/* Hamburger + mobile sidebar */
.hamburger {
    display: none;
    background: transparent; border: 1px solid var(--c-border);
    color: var(--c-text); padding: 6px 10px; border-radius: var(--r-sm);
    cursor: pointer; align-items: center; justify-content: center;
}
.hamburger:hover { background: var(--c-surface-2); }
.sidebar-close-btn {
    display: none; position: absolute; top: 12px; right: 12px;
    background: transparent; border: none; color: #cbd5e1;
    font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 10px;
}
.sidebar-close-btn:hover { color: #fff; }
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .hamburger { display: inline-flex; flex: 0 0 auto; }
    .sidebar-close-btn { display: block; }
    .sidebar {
        position: fixed; inset: 0 auto 0 0; width: 280px; max-width: 86vw;
        z-index: 1100; transform: translateX(-100%); transition: transform .22s ease;
        box-shadow: 0 0 30px rgba(0,0,0,.35);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    body.sidebar-open { overflow: hidden; }       /* lock background scroll */
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open::after {
        content: ''; position: fixed; inset: 0; background: rgba(15,23,42,.4);
        z-index: 1090;
    }
    /* Keep the floating chat launcher out of the way when the drawer is
       open — otherwise it sits on top of the backdrop and looks broken. */
    body.sidebar-open .chat-launcher,
    body.sidebar-open .chat-panel { display: none !important; }
    .topbar { padding: 14px 18px; gap: 12px; }
    .page-title { font-size: 18px; }
    .demo-bar, .impersonation-bar { flex-wrap: wrap; }
    .topbar-meta { gap: 8px; flex: 0 0 auto; }
    /* On phones, the collapsible <details> sidebar groups turned the drawer
       into a click puzzle (open Planning, open Caseload, then click an item).
       Force every nav-group to render expanded so the whole tree is one tap. */
    .sidebar .nav-group { display: block; }
    .sidebar .nav-group > summary { display: none; }
    .sidebar .nav-group > .nav-group-body { display: block !important; }
    /* Modern browsers (Chrome 121+, Safari 17+) wrap a closed <details>'s body
       in a ::details-content slot set to content-visibility:hidden — the
       display override above cannot pierce it, which silently hid every grouped
       nav item on phones (leaving only Dashboard / Action Center). Reveal the
       slot explicitly so the whole tree shows even before the JS force-opens. */
    .sidebar .nav-group::details-content {
        content-visibility: visible !important;
        display: block !important;
    }
}
@media (max-width: 540px) {
    .topbar-meta .qs-trigger span { display: none; }   /* shrink "Search" → just the icon on phones */
    .topbar-meta .qs-trigger kbd { display: none; }
    .topbar { padding: 10px 12px; }
    .page-title { font-size: 16px; }
    .bell-pop { width: 92vw; right: -8px; }
    .content { padding: 16px 14px; }
    .chat-toggle { padding: 10px 14px 10px 12px; bottom: 14px; right: 14px; }
    .chat-toggle-label { display: none; }              /* tight phones: icon-only launcher */
    .chat-panel { width: calc(100vw - 16px); right: 8px; bottom: 8px;
                  max-height: calc(100vh - 16px); }
}

/* SuperAdmin "view as" banner */
.impersonation-bar {
    background: #f59e0b; color: #1f2937;
    padding: 10px 18px; display: flex; gap: 14px;
    align-items: center; justify-content: space-between;
    font-size: var(--text-md);
    border-bottom: 1px solid #b45309;
}
.impersonation-bar .btn { background: #1f2937; color: #fff; border-color: #1f2937; }
.impersonation-bar .btn:hover { background: #0f172a; color: #fff; }

/* Audit log */
.audit-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-top: 8px; }
.audit-json { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 4px; padding: 8px; font-size: var(--text-xs); max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; }
.badge-risk-info     { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.badge-risk-low      { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.badge-risk-medium   { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.badge-risk-high     { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.badge-risk-critical { background: var(--c-error); color: #fff; border-color: var(--c-error); }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px; }

/* Bulk-action toolbar (admin tables) */
.bulk-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-sm); padding: 10px 14px; margin: 0 0 12px;
    box-shadow: var(--shadow-1);
}
.bulk-bar[hidden] { display: none; }

/* Empty-state cells */
.table .empty { padding: 32px 16px; }
.table .empty .btn { margin: 0 4px; }

/* Shortcut help */
.shortcut-table { width: 100%; border-collapse: collapse; }
.shortcut-table td { padding: 6px 4px; font-size: var(--text-base); vertical-align: middle; }
.shortcut-table td:first-child { width: 130px; white-space: nowrap; }
.shortcut-table kbd { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 4px; padding: 1px 6px; font-size: var(--text-xs); color: var(--c-muted); margin-right: 2px; }

/* Quick-search palette (Ctrl/⌘+K) */
.qs-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    color: var(--c-muted); padding: 6px 12px; border-radius: var(--r-sm);
    cursor: pointer; font: inherit; font-size: var(--text-md);
}
.qs-trigger:hover { background: var(--c-bg); color: var(--c-text); }
.qs-trigger kbd { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px;
    padding: 1px 6px; font-size: var(--text-xs); color: var(--c-muted); }

.qs-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 12vh; z-index: 9998;
}
[data-theme="dark"] .qs-overlay { background: rgba(0,0,0,.65); }
.qs-overlay.open { display: flex; }
.qs-panel {
    width: min(620px, 92vw); background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    box-shadow: 0 24px 60px rgba(15,23,42,.25);
    overflow: hidden;
}
.qs-input-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--c-border);
    color: var(--c-muted);
}
.qs-input-row input {
    flex: 1; border: none; background: transparent; outline: none;
    color: var(--c-text); font-size: 15px;
}
.qs-input-row kbd { background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: 4px; padding: 1px 6px; font-size: var(--text-xs); color: var(--c-muted); }
.qs-results { max-height: 56vh; overflow: auto; }
.qs-row {
    display: grid; grid-template-columns: 80px 1fr auto; gap: 12px;
    align-items: baseline; padding: 10px 16px;
    border-bottom: 1px solid var(--c-border); color: var(--c-text);
    text-decoration: none;
}
.qs-row:last-child { border-bottom: none; }
.qs-row:hover, .qs-row.active { background: var(--c-surface-2); text-decoration: none; }
.qs-type {
    display: inline-block; text-align: center; font-size: 10px;
    text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px;
    border-radius: 4px; background: var(--c-surface-2); color: var(--c-muted);
}
.qs-type-student { background: #dbeafe; color: #1e40af; }
.qs-type-course  { background: #dcfce7; color: #166534; }
.qs-type-plan    { background: #fef3c7; color: #92400e; }
.qs-type-page    { background: #ede9fe; color: #5b21b6; }
[data-theme="dark"] .qs-type-student { background: #1e3a8a; color: #bfdbfe; }
[data-theme="dark"] .qs-type-course  { background: #14532d; color: #bbf7d0; }
[data-theme="dark"] .qs-type-plan    { background: #78350f; color: #fde68a; }
[data-theme="dark"] .qs-type-page    { background: #4c1d95; color: #ddd6fe; }
.qs-label { font-weight: 500; }
.qs-sublabel { color: var(--c-muted); font-size: var(--text-sm); }
.qs-empty { padding: 18px 16px; color: var(--c-muted); font-size: var(--text-md); text-align: center; }

/* Topbar bell + notifications */
.topbar-meta { display: flex; align-items: center; gap: 12px; }
.bell { position: relative; text-decoration: none; font-size: 18px; line-height: 1; padding: 6px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; }
.bell:hover { background: var(--c-surface-2); }
.bell-badge { position: absolute; top: -2px; right: -4px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 999px; min-width: 16px; text-align: center; }

.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.notif { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 0; }
.notif-unread { border-left: 3px solid #3b82f6; background: #f0f9ff; }
.notif-row { margin: 0; padding: 0; }
.notif-link { display: block; width: 100%; text-align: left; padding: 10px 12px; background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
.notif-link:hover { background: rgba(59,130,246,.06); }
.notif header { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.notif p { margin: 0; font-size: var(--text-md); color: var(--c-muted); white-space: pre-wrap; }

/* Timeline */
.timeline-svg { width: 100%; height: auto; max-height: 360px; display: block; }
.readiness-meter { position: relative; height: 28px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 999px; overflow: hidden; }
.readiness-fill { background: linear-gradient(90deg, #3b82f6 0%, #16a34a 100%); height: 100%; transition: width .4s ease; }
.readiness-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-md); font-weight: 600; color: #0f172a; text-shadow: 0 0 6px rgba(255,255,255,0.7); }

/* Transcript */
.transcript { max-width: 920px; margin: 0 auto; }
.transcript-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.transcript-meta { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.transcript-meta th { text-align: left; color: var(--c-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; width: 1%; white-space: nowrap; }
.transcript-meta td { padding: 6px 14px 6px 4px; font-size: var(--text-base); }
.transcript-term { margin: 18px 0; }
.transcript-term h3 { margin: 0 0 6px; font-size: var(--text-base); }
@page { margin: 18mm 16mm; }
@media print {
    .sidebar, .topbar, .planner-toolbar, .toolbar, button, .btn,
    .skip-link, .sidebar-footer, .toast, .flash { display: none !important; }
    .app-shell { display: block; }
    .main, .content { padding: 0 !important; }
    .card { box-shadow: none; border: none; padding: 0; }
    /* Print colours faithfully (badges, header tints) instead of dropping them. */
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Keep document blocks whole rather than splitting a term or a row across
       a page boundary; repeat table headers on each printed page. */
    .transcript-term, .transcript-meta tr,
    table.table tr, .receipt, .doc-sheet { break-inside: avoid; page-break-inside: avoid; }
    .transcript-term h3 { break-after: avoid; page-break-after: avoid; }
    table.table thead { display: table-header-group; }
}

/* Curriculum board */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; margin-top: 16px; }
.board-col { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 12px; min-height: 320px; }
.board-col header { margin-bottom: 8px; }
.board-col header h3 { margin: 0; font-size: var(--text-base); display: flex; align-items: center; gap: 6px; }
.board-col header p { margin: 4px 0 0; font-size: var(--text-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.board-zone { list-style: none; margin: 0; padding: 0; min-height: 240px; display: flex; flex-direction: column; gap: 6px; }
.board-zone .course-card { padding: 8px 10px; }
.board-zone .empty { padding: 16px; text-align: center; }

/* Planner drag states */
.drag-over { outline: 2px dashed #3b82f6; outline-offset: -4px; background: rgba(59,130,246,.06); }
.drag-reject { outline: 2px dashed #dc2626; outline-offset: -4px; background: rgba(220,38,38,.06); cursor: not-allowed; }
.drag-clone { box-shadow: 0 8px 24px rgba(15,23,42,.18); border-radius: var(--r-sm); }
.dragging { opacity: 0.4; }
.has-conflict { box-shadow: inset 3px 0 0 #dc2626; }
.overload { color: #dc2626; font-weight: 700; }
.course-card { touch-action: none; } /* let pointer fallback own scrolling on a card */

/* Planner comments */
.semester header > div { display: flex; align-items: center; gap: 8px; }
.semester-approved { border-color: #16a34a; box-shadow: inset 4px 0 0 #16a34a; }
.semester-rejected { border-color: #dc2626; box-shadow: inset 4px 0 0 #dc2626; }
.semester-locked { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px); opacity: .85; }
.semester-locked header h4 { color: #475569; }
.dropzone-locked { pointer-events: none; }
.dropzone-locked.drag-over, .dropzone-locked.drag-reject { background: transparent; outline-color: transparent; }
.course-card-locked { cursor: not-allowed; opacity: .85; background: #fff; border-color: #e2e8f0; }
.comment-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.comment { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 8px 12px; font-size: var(--text-md); }
.comment header { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.comment p { margin: 0; white-space: pre-wrap; }
.comment-approved { border-left: 3px solid #16a34a; }
.comment-rejected { border-left: 3px solid #dc2626; }
.comment-form-toggle { margin-top: 12px; }
.comment-form-toggle summary { cursor: pointer; color: var(--c-muted); font-size: var(--text-md); }
.comment-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.comment-form textarea { width: 100%; padding: 8px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font: inherit; resize: vertical; }
.comment-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.badge-info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }

/* MFA */
.qr-frame { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-sm); margin: 12px 0; }
.qr-frame svg { display: block; max-width: 240px; height: auto; }
.secret-display { display: inline-block; padding: 8px 12px; background: var(--c-surface-2); border: 1px dashed var(--c-border); border-radius: var(--r-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-base); letter-spacing: .04em; }
.recovery-list { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 8px; }
.recovery-list li { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 10px 12px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: .08em; }
.checkbox { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: var(--text-base); }
.btn-danger { background: var(--c-error); color: #fff; border-color: var(--c-error); }
.btn-danger:hover { background: var(--bad-fg); border-color: var(--bad-fg); }
.btn-warning { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.btn-warning:hover { background: var(--warn-bd); }
.badge-inactive, .badge-Disabled { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
/* Semantic badge variants that were referenced in views but undefined —
   they used to silently render as the neutral gray pill. */
.badge-warning   { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.badge-error,
.badge-danger    { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.badge-success,
.badge-good_standing { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.badge-enrolled  { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.alert-warning { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.alert-success { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }

/* Reports */
.bar { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 999px; height: 10px; min-width: 120px; overflow: hidden; }
.bar-fill { background: var(--c-accent, #3b82f6); height: 100%; }
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { padding: 6px 0; border-bottom: 1px dashed var(--c-border); font-size: var(--text-base); }
.link-list li:last-child { border-bottom: none; }

/* Group breakdown */
.group-block { border: 1px solid var(--c-border); border-radius: var(--r-sm); margin-bottom: 10px; background: var(--c-surface-2); }
.group-block.group-ok { border-left: 4px solid var(--c-success); }
.group-block.group-pending { border-left: 4px solid var(--c-warning); }
.group-block > summary {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.group-block > summary::-webkit-details-marker { display: none; }
.group-block > summary::before {
    content: "▸";
    color: var(--c-muted);
    font-size: 10px;
    transition: transform .12s ease;
    flex-shrink: 0;
}
.group-block[open] > summary::before { transform: rotate(90deg); }
.group-block > summary:hover { background: rgba(15,23,42,.03); border-radius: var(--r-sm); }
[data-theme="dark"] .group-block > summary:hover { background: rgba(255,255,255,.04); }
.group-block > summary h4 { margin: 0; font-size: var(--text-base); flex: 1; }
.group-block > .course-list,
.group-block > .group-children { padding: 0 14px 12px; }
.group-meta { color: var(--c-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; }
.group-summary { color: var(--c-text); font-size: var(--text-md); }
.group-children { margin-top: 8px; padding-left: 16px !important; border-left: 2px solid var(--c-border); }

.audit-toggle-all { display: flex; gap: 6px; flex-wrap: wrap; }

/* Floating KPI strip: a slim, fixed-position copy of the .kpis row
   that appears at the top of the viewport once the in-card KPIs
   scroll out of view. Driven by IntersectionObserver in audit.php. */
.audit-kpi-strip {
    position: fixed;
    top: 0;
    left: var(--sidebar-width, 240px);
    right: 0;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 10px 22px;
    display: flex;
    gap: 24px;
    align-items: center;
    z-index: 20;
    transform: translateY(-100%);
    transition: transform .15s ease;
    box-shadow: 0 1px 4px rgba(15,23,42,.04);
    font-size: var(--text-md);
}
.audit-kpi-strip.is-visible { transform: translateY(0); }
.audit-kpi-strip .kpi-pair { display: inline-flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.audit-kpi-strip .kpi-pair strong { font-size: var(--text-base); }
.audit-kpi-strip .kpi-pair span { color: var(--c-muted); font-size: var(--text-sm); }
.audit-kpi-strip .badge { margin-left: auto; }
@media (max-width: 900px) { .audit-kpi-strip { left: 0; padding: 8px 14px; gap: 14px; font-size: var(--text-sm); overflow-x: auto; } }

@media (max-width: 720px) {
    .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .kpis .kpi-value { font-size: 18px; }
    .group-block > summary { gap: 6px; padding: 9px 10px; }
    .group-block > summary h4 { font-size: var(--text-md); flex-basis: 100%; }
    .group-meta, .group-summary { font-size: var(--text-xs); }
    .group-block > .course-list,
    .group-block > .group-children { padding: 0 10px 10px; }
    .audit-summary header { flex-direction: column; align-items: flex-start; }
    .audit-summary header > div:nth-child(2) { flex-wrap: wrap; gap: 6px; width: 100%; }
    .audit-summary header > div:nth-child(2) .btn-sm { font-size: var(--text-sm); padding: 5px 9px; }
    .audit-toggle-all .btn-sm { padding: 4px 8px; font-size: var(--text-sm); }
    .audit-breakdown > header { flex-direction: column; align-items: stretch; }
    .grid-2 { grid-template-columns: 1fr; gap: 12px; }
    .audit-section-header { margin: 14px 0 6px !important; }
}
@media (max-width: 480px) {
    .kpis { grid-template-columns: 1fr 1fr; }
    .kpis .kpi-value { font-size: 16px; }
    .group-block > summary .badge { margin-left: auto; }
}

/* Planner */
.planner-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.planner { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
.planner-pool { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 16px; max-height: 70vh; overflow: auto; }
.planner-pool h3 { margin-top: 0; font-size: var(--text-base); }
.course-pool, .dropzone { list-style: none; margin: 0; padding: 0; min-height: 80px; }
.planner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; }
.semester { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 14px; min-height: 200px; }
.semester header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.semester h4 { margin: 0; font-size: var(--text-base); }
.credit-meter { font-size: var(--text-sm); color: var(--c-muted); }
/* Term-aware credit-load signal: under full time (aid/visa risk), overload
   (needs approval), and over the hard cap (not permitted). */
.credit-meter.under    { color: var(--c-warning); font-weight: 600; }
.credit-meter.overload { color: var(--c-warning); font-weight: 700; }
.credit-meter.over-cap { color: var(--c-error); font-weight: 700; }
.dropzone { padding: 8px; border-radius: var(--r-sm); transition: background .12s ease, outline-color .12s ease; outline: 2px dashed transparent; outline-offset: -4px; }
.dropzone.drag-over { background: #eef4ff; outline-color: var(--c-primary); }
.course-card {
    display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
    background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-sm);
    padding: 8px 10px; margin-bottom: 6px; cursor: grab; font-size: var(--text-md); box-shadow: var(--shadow-1);
}
.course-card:active { cursor: grabbing; }
.course-card.dragging { opacity: .4; }
.course-card.placed { background: var(--c-surface-2); }
.course-card .course-code { font-weight: 600; color: var(--c-primary); }
.course-card .course-credits { color: var(--c-muted); font-size: var(--text-sm); }
.course-card.has-conflict { border-color: var(--c-error); background: #fef2f2; }
.course-card.has-warning { border-color: #d97706; background: #fffbeb; }
.course-card.has-error { border-color: var(--c-error); background: #fef2f2; cursor: pointer; }
.course-card.has-error::after {
    content: "click to request override";
    grid-column: 1 / -1; display: block;
    font-size: var(--text-xs); color: #991b1b; margin-top: 4px;
}

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline-item { padding: 10px 0; border-bottom: 1px solid var(--c-border); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.timeline-item:last-child { border-bottom: none; }
.timeline-step { font-weight: 600; color: var(--c-muted); }
.timeline-role { color: var(--c-text); font-weight: 500; }
.timeline-notes { width: 100%; color: var(--c-muted); font-size: var(--text-md); margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--c-border); }
.badge-pending { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.badge-approved { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.badge-rejected { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.badge-cancelled { background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-border); }

@media (max-width: 880px) {
    .app-shell { grid-template-columns: 1fr; }
    /* The earlier @media(max-width:900px) block puts the sidebar into a
       slide-out drawer (transform translateX off-screen, .sidebar-open
       slides it back in). Don't display:none it here or the hamburger
       button has nothing to reveal. */
    .planner { grid-template-columns: 1fr; gap: 12px; }
    .planner-pool { max-height: 280px; }
    .planner-toolbar { flex-wrap: wrap; gap: 8px; }
    .planner-toolbar > * { flex: 1 1 auto; }
    .planner-grid { grid-template-columns: 1fr !important; gap: 12px; }
}
@media (max-width: 480px) {
    .planner-toolbar h2 { font-size: 17px; }
    .planner-pool { padding: 12px; }
    .planner-pool h3 { font-size: var(--text-md); }
}

/* ------------------------------------------------------------------ */
/*  Degree-plan drag-and-drop editor (admin / chair).                  */
/* ------------------------------------------------------------------ */
.plan-editor-card { display: block; }
.plan-editor {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    margin-top: 12px;
    align-items: start;
}
.plan-pool {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 12px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 64px);
    overflow: auto;
}
.plan-pool h4 { margin: 0 0 8px; font-size: var(--text-base); }
.plan-pool input[type="search"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: var(--text-md);
    margin-bottom: 8px;
    background: var(--c-surface);
    color: var(--c-text);
}
.pool-zone {
    list-style: none;
    margin: 0;
    padding: 6px;
    min-height: 80px;
    border-radius: var(--r-sm);
    transition: background .12s ease, outline-color .12s ease;
    outline: 2px dashed transparent;
    outline-offset: -4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pool-zone.drag-over { background: rgba(59,130,246,.08); outline-color: var(--c-primary); }

.plan-editor-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 10px;
}
.plan-editor-tabs button {
    background: transparent;
    border: 0;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--c-muted);
    font-size: var(--text-base);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.plan-editor-tabs button.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.plan-editor-tabs button:hover { color: var(--c-text); }

.plan-editor-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.plan-editor-empty { padding: 24px; text-align: center; }
/* Empty-lane placeholder — shown when a lane has no courses, so the drop
   zone reads as an actionable target rather than a blank box. */
.plan-lane-empty {
    list-style: none;
    margin: 4px 6px;
    padding: 18px 12px;
    text-align: center;
    border: 1px dashed var(--c-border);
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
}
/* Per-card keyboard "Move…" button — sits in the top-right of each card
   so a tab order user can act on it without dragging. */
.plan-card { position: relative; }
.plan-card-move {
    position: absolute; top: 6px; right: 6px;
    padding: 2px 8px; font-size: var(--text-xs); min-height: 0;
    opacity: 0; transition: opacity .12s;
}
.plan-card:hover .plan-card-move,
.plan-card:focus-within .plan-card-move,
.plan-card-move:focus { opacity: 1; }
/* Destination picker dialog (keyboard accessibility path for drag-and-drop). */
.plan-move-picker {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15,23,42,.45);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.plan-move-picker[hidden] { display: none; }
.plan-move-panel {
    background: var(--c-surface); color: var(--c-text);
    border-radius: var(--r-md); border: 1px solid var(--c-border);
    box-shadow: var(--shadow-2);
    width: 100%; max-width: 420px; max-height: 80vh; overflow: hidden;
    display: flex; flex-direction: column;
}
.plan-move-panel > header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid var(--c-border);
}
.plan-move-close {
    background: transparent; border: 0; font-size: 20px; cursor: pointer;
    color: var(--c-muted); padding: 4px 8px;
}
.plan-move-list {
    list-style: none; margin: 0; padding: 8px;
    overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.plan-move-list .plan-move-opt {
    width: 100%; justify-content: flex-start; text-align: left;
    border-color: transparent; background: transparent;
}
.plan-move-list .plan-move-opt:hover:not([disabled]),
.plan-move-list .plan-move-opt:focus { background: var(--c-surface-2); }
.plan-move-list .plan-move-opt[disabled] { opacity: .55; cursor: not-allowed; }
.plan-lane {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}
.plan-lane.plan-lane-muted { background: var(--c-surface-2); }
.plan-lane > header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--c-border);
}
.plan-lane > header h4 { margin: 0; font-size: var(--text-md); }
.plan-lane > header .muted { font-size: var(--text-xs); }
.plan-lane-zone {
    list-style: none;
    margin: 0;
    padding: 4px;
    min-height: 60px;
    border-radius: var(--r-sm);
    flex: 1;
    transition: background .12s ease, outline-color .12s ease;
    outline: 2px dashed transparent;
    outline-offset: -4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.plan-lane-zone.drag-over { background: rgba(59,130,246,.10); outline-color: var(--c-primary); }

.plan-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 6px 8px;
    cursor: grab;
    font-size: var(--text-md);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    touch-action: none;
    user-select: none;
}
.plan-card:hover { border-color: var(--c-primary); }
.plan-card:active { cursor: grabbing; }
.plan-card.dragging { opacity: .4; }
.plan-card strong { color: var(--c-primary); font-size: var(--text-sm); }
.plan-card-title { color: var(--c-text); flex: 1 1 100%; font-size: var(--text-sm); }
.plan-card-pool { background: var(--c-surface); }

[data-theme="dark"] .plan-pool { background: var(--c-surface-2); }
[data-theme="dark"] .plan-lane { background: var(--c-surface); }
[data-theme="dark"] .plan-lane.plan-lane-muted { background: var(--c-surface-2); }
[data-theme="dark"] .plan-card { background: var(--c-surface-2); }

[data-theme="dark"] .pool-zone.drag-over,
[data-theme="dark"] .plan-lane-zone.drag-over {
    background: rgba(59,130,246,.18);
}

@media (max-width: 880px) {
    .plan-editor { grid-template-columns: 1fr; }
    .plan-pool { position: static; max-height: 320px; }
}

/* Per-term group boxes — advisors see "core / required / elective" splits. */
.term-group-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin: 8px 0 4px;
}
.term-group-box {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--r-sm);
    padding: 8px 10px;
}
.term-group-box.term-group-box-ungrouped { border-left-color: var(--c-muted); }
.term-group-box > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--c-border);
}
.term-group-box > header strong { font-size: var(--text-md); }
.term-group-box > header .muted { font-size: var(--text-xs); }
.term-group-box .course-list li { padding: 4px 0; font-size: var(--text-md); border-bottom: none; }
[data-theme="dark"] .term-group-box { background: var(--c-surface); }

/* By-requirement-group breakdown — mirror of plan-term blocks. */
.plan-group-block {
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin: 10px 0;
    background: var(--c-surface);
}
.plan-group-block.plan-group-block-ungrouped { border-left-color: var(--c-muted); }
.plan-group-block > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--c-border);
}
.group-term-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.group-term-box {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 8px 10px;
}
.group-term-box.group-term-box-unscheduled { border-style: dashed; }
.group-term-box > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--c-border);
    font-size: var(--text-md);
}
.group-term-box > header .muted { font-size: var(--text-xs); }
.group-term-box .course-list li { padding: 4px 0; font-size: var(--text-md); border-bottom: none; }
[data-theme="dark"] .plan-group-block { background: var(--c-surface-2); }
[data-theme="dark"] .group-term-box { background: var(--c-surface); }

/* Course chips — used in every "box" on the plan show page (per-term group
   boxes, per-group term boxes, and the unscheduled trailer). */
.course-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px;
    margin: 6px 0 2px;
}
.course-chip {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--r-sm);
    padding: 6px 8px 5px;
    transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
    min-width: 0;
}
.course-chip:hover {
    border-color: var(--c-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-1);
}
.course-chip-code {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--c-primary);
    text-transform: uppercase;
}
.course-chip-title {
    font-size: var(--text-sm);
    color: var(--c-text);
    line-height: 1.25;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.course-chip-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.course-chip-cr {
    font-size: 10px;
    color: var(--c-muted);
    background: var(--c-surface-2);
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
}
.course-chip-tag {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-warning);
    background: rgba(217,119,6,.10);
    padding: 1px 6px;
    border-radius: 999px;
}
.course-chip.is-elective { border-left-color: var(--c-warning); border-style: dashed; }
.course-chip.is-elective .course-chip-code { color: var(--c-warning); }

[data-theme="dark"] .course-chip { background: var(--c-surface-2); }
[data-theme="dark"] .course-chip-cr { background: var(--c-surface); }
[data-theme="dark"] .course-chip-tag { background: rgba(217,119,6,.18); color: #fde68a; }

/* ------------------------------------------------------------------ */
/*  What-if simulator + plan-switcher comparison columns.              */
/* ------------------------------------------------------------------ */
.what-if-compare { align-items: start; }
.wi-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 4px 0 8px;
}
.wi-metric {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 8px 10px;
}
.wi-metric-label { color: var(--c-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; }
.wi-metric-value { font-size: 16px; font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wi-delta { font-size: var(--text-xs); font-weight: 600; padding: 1px 6px; border-radius: 999px; }
.wi-delta-good { background: rgba(22,163,74,.12); color: var(--c-success); }
.wi-delta-bad  { background: rgba(220,38,38,.12); color: var(--c-error); }
.wi-groups, .wi-missing { list-style: none; padding: 0; margin: 0; }
.wi-groups li, .wi-missing li {
    padding: 6px 8px;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--text-md);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.wi-groups li:last-child, .wi-missing li:last-child { border-bottom: none; }
.wi-group.wi-group-ok { border-left: 3px solid var(--c-success); padding-left: 6px; }
.wi-group.wi-group-pending { border-left: 3px solid var(--c-warning); padding-left: 6px; }

[data-theme="dark"] .wi-metric { background: var(--c-surface); }

/* ------------------------------------------------------------------ */
/*  Chair capacity-planning table.                                     */
/* ------------------------------------------------------------------ */
.capacity-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin: 10px 0;
}
.capacity-stat {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 10px 12px;
}
.capacity-stat-warn { border-left: 3px solid var(--c-warning); }
.capacity-stat-label { color: var(--c-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; }
.capacity-stat-value { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--c-text); }
.capacity-bar {
    position: relative;
    height: 22px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    min-width: 160px;
}
.capacity-bar-fill {
    position: absolute; inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
    opacity: .85;
}
.capacity-bar-count {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--c-text);
}
[data-theme="dark"] .capacity-stat { background: var(--c-surface); }
[data-theme="dark"] .capacity-bar  { background: var(--c-surface-2); }
[data-theme="dark"] .capacity-bar-count { color: #f1f5f9; text-shadow: 0 0 6px rgba(0,0,0,0.55); }

/* ------------------------------------------------------------------ */
/*  Admin directory: groups landing + paginated list.                  */
/* ------------------------------------------------------------------ */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.view-toggle-btn {
    padding: 6px 12px;
    font-size: var(--text-md);
    color: var(--c-muted);
    background: var(--c-surface);
    text-decoration: none;
    border-right: 1px solid var(--c-border);
}
.view-toggle-btn:last-child { border-right: 0; }
.view-toggle-btn:hover { color: var(--c-text); text-decoration: none; }
.view-toggle-btn.active { background: var(--c-primary); color: #fff; }

.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.group-card {
    display: block;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--r-md);
    padding: 12px 14px;
    text-decoration: none;
    color: var(--c-text);
    transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.group-card:hover {
    border-color: var(--c-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-1);
    text-decoration: none;
}
.group-card-muted { border-left-color: var(--c-muted); }
.group-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.group-card-head strong { font-size: var(--text-base); }
.group-card-total {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-primary);
    line-height: 1;
}
.group-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--c-muted);
    align-items: center;
}
.group-card-meta .badge { font-size: var(--text-xs); padding: 2px 6px; }

.filter-card form label { font-size: var(--text-sm); color: var(--c-muted); display: block; }
.filter-card form input,
.filter-card form select { width: 100%; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
}
.pagination .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

[data-theme="dark"] .group-card { background: var(--c-surface); }
[data-theme="dark"] .view-toggle-btn { background: var(--c-surface-2); }

/* Demo-mode banner — only visible when APP_DEMO=true. Sits at the top of
   every authenticated page so prospects always know which user they're
   currently signed in as and can hop back to the role picker. */
.demo-bar {
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
    color: #fff;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: var(--text-md);
    box-shadow: 0 1px 4px rgba(15,23,42,.12);
}
.demo-bar code { background: rgba(255,255,255,.18); padding: 1px 6px; border-radius: 4px; }
.demo-bar .btn {
    background: #fff; color: #0f172a; border: 0;
    padding: 4px 10px; border-radius: 6px; font-weight: 600;
}
.demo-bar .btn:hover { background: #e0f2fe; }

/* ------------------------------------------------------------------ */
/*  Conversational advisor — floating chat panel.                      */
/* ------------------------------------------------------------------ */
.chat-launcher {
    position: fixed; bottom: 22px; right: 22px; z-index: 1500;
}
.chat-tip {
    position: absolute; bottom: calc(100% + 12px); right: 0;
    width: 280px; max-width: calc(100vw - 32px);
    background: var(--c-surface); color: var(--c-text);
    border: 1px solid var(--c-border); border-radius: 10px;
    padding: 12px 14px; font-size: var(--text-sm); line-height: 1.45;
    box-shadow: 0 12px 32px rgba(15,23,42,.22);
    opacity: 0; pointer-events: none; transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}
.chat-tip::after {
    content: ''; position: absolute; bottom: -6px; right: 26px;
    width: 10px; height: 10px; background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    transform: rotate(45deg);
}
.chat-tip strong { display: block; margin-bottom: 4px; }
.chat-tip p { margin: 0; }
.chat-launcher:hover .chat-tip,
.chat-launcher:focus-within .chat-tip {
    opacity: 1; transform: translateY(0);
}
body:has(.chat-panel.open) .chat-tip { display: none; }
.chat-toggle {
    z-index: 1500;
    background: linear-gradient(135deg, #6366f1, #0ea5e9);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: var(--text-base);
    box-shadow: 0 10px 28px rgba(99,102,241,.35);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.chat-toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(99,102,241,.45); }
.chat-toggle-label { line-height: 1; }

.chat-panel {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: min(420px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 60px));
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15,23,42,.25);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1500;
}
.chat-panel.open { display: flex; }
.chat-panel.open ~ .chat-launcher, body:has(.chat-panel.open) .chat-launcher { display: none; }
.chat-head {
    background: linear-gradient(135deg, #6366f1, #0ea5e9);
    color: #fff;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-head strong { font-size: var(--text-base); }
.chat-head .muted { color: rgba(255,255,255,.78) !important; }
.chat-close, .chat-clear {
    background: rgba(255,255,255,.18); color: #fff; border: 0;
    width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: var(--text-base);
}
.chat-close:hover, .chat-clear:hover { background: rgba(255,255,255,.28); }
.chat-head-actions { display: flex; gap: 6px; }

.chat-consent {
    margin: 12px 14px 0; padding: 12px 14px; border-radius: 10px;
    background: #fffbe6; border: 1px solid #fde68a; color: #713f12;
    font-size: var(--text-sm); line-height: 1.5;
}
.chat-consent-body { margin: 0 0 10px; }
.chat-consent-body strong { color: #92400e; text-transform: capitalize; }
.chat-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-consent-actions .btn { font-size: var(--text-sm); padding: 6px 10px; }

.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--c-surface-2);
}
.chat-msg {
    max-width: 88%;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: var(--text-md);
    line-height: 1.45;
    position: relative;
}
.chat-msg-body strong { color: var(--c-primary); }
.chat-msg-user {
    align-self: flex-end;
    background: var(--c-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg-user .chat-msg-body strong { color: #e0e7ff; }
.chat-msg-assistant {
    align-self: flex-start;
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-bottom-left-radius: 4px;
}
.chat-msg-tag {
    position: absolute;
    top: -8px;
    left: 10px;
    background: var(--c-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
}

.chat-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 14px 0;
    background: var(--c-surface);
}
.chat-suggest button {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-muted);
    font-size: var(--text-xs);
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.chat-suggest button:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.chat-form {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}
.chat-form textarea {
    flex: 1;
    resize: none;
    padding: 8px 10px;
    font-family: inherit;
    font-size: var(--text-md);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    min-height: 36px;
    max-height: 100px;
    background: var(--c-surface);
    color: var(--c-text);
}
.chat-status {
    font-size: var(--text-xs);
    padding: 0 14px 8px;
    background: var(--c-surface);
    min-height: 14px;
}
.chat-status[data-kind="busy"]  { color: var(--c-warning); }
.chat-status[data-kind="error"] { color: var(--c-error); }
.chat-status[data-kind="ok"]    { color: var(--c-success); }

[data-theme="dark"] .chat-panel { box-shadow: 0 24px 60px rgba(0,0,0,.55); }
[data-theme="dark"] .chat-msg-assistant { background: var(--c-surface-2); }

@media (max-width: 540px) {
    .chat-panel { right: 0; bottom: 0; width: 100vw; max-height: 90vh; border-radius: 14px 14px 0 0; }
}

/* ------------------------------------------------------------------ */
/*  Auto-scheduler: weekly grid + schedule-option cards.               */
/* ------------------------------------------------------------------ */
.schedule-list { display: grid; gap: 16px; }
.schedule-card { margin: 0; }

.weekly-grid {
    display: grid;
    grid-template-columns: 48px repeat(5, 1fr);
    gap: 4px;
    margin-top: 6px;
}
.weekly-grid-hours { display: flex; flex-direction: column; padding-top: 22px; }
.weekly-grid-hour {
    height: var(--row-height);
    font-size: 10px;
    color: var(--c-muted);
    text-align: right;
    padding-right: 4px;
    border-top: 1px solid var(--c-border);
}
.weekly-grid-col { background: var(--c-surface-2); border-radius: var(--r-sm); overflow: hidden; }
.weekly-grid-col-head {
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 0;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}
.weekly-grid-col-body {
    position: relative;
    height: var(--grid-height);
}
.weekly-grid-hour-line {
    height: var(--row-height);
    border-top: 1px dashed var(--c-border);
}
.weekly-grid-hour-line:first-child { border-top: 0; }
.weekly-grid-block {
    position: absolute;
    left: 4px; right: 4px;
    border-radius: 4px;
    color: #fff;
    padding: 2px 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15,23,42,.15);
}
.weekly-grid-block-code { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
[data-theme="dark"] .weekly-grid-col-head { background: var(--c-surface-2); }

/* ------------------------------------------------------------------ */
/*  Accreditation — curriculum map heat-grid                          */
/* ------------------------------------------------------------------ */
.curriculum-map { border-collapse: collapse; width: max-content; min-width: 100%; }
.curriculum-map th, .curriculum-map td { border: 1px solid var(--c-border); padding: 0; text-align: center; vertical-align: middle; }
.curriculum-map .cm-corner   { background: var(--c-surface-2); padding: 6px 10px; min-width: 220px; text-align: left; font-weight: 600; }
.curriculum-map .cm-courseh  { background: var(--c-surface-2); padding: 6px 4px; min-width: 50px; height: 110px; }
.curriculum-map .cm-courseh span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--text-sm); font-weight: 600; }
.curriculum-map .cm-plo      { text-align: left; padding: 8px 10px; min-width: 220px; background: var(--c-surface); }
.curriculum-map .cm-cell     { width: 64px; height: 44px; transition: background-color .12s ease; }
.curriculum-map .cm-cell-empty { background: var(--c-surface); }
.curriculum-map .cm-cell-I   { background: #dbeafe; }
.curriculum-map .cm-cell-R   { background: #fef3c7; }
.curriculum-map .cm-cell-M   { background: #dcfce7; }
.curriculum-map .cm-select   { background: transparent; border: 0; width: 100%; height: 100%; cursor: pointer; font-weight: 700; }
.curriculum-map .cm-cell-I .cm-select { color: #1e40af; }
.curriculum-map .cm-cell-R .cm-select { color: #92400e; }
.curriculum-map .cm-cell-M .cm-select { color: #166534; }
[data-theme="dark"] .curriculum-map .cm-cell-I { background: #1e3a8a; }
[data-theme="dark"] .curriculum-map .cm-cell-R { background: #78350f; }
[data-theme="dark"] .curriculum-map .cm-cell-M { background: #14532d; }
[data-theme="dark"] .curriculum-map .cm-cell-I .cm-select,
[data-theme="dark"] .curriculum-map .cm-cell-R .cm-select,
[data-theme="dark"] .curriculum-map .cm-cell-M .cm-select { color: #f8fafc; }

/* ------------------------------------------------------------------ */
/*  Priority inbox — "What needs your attention" on the dashboard     */
/* ------------------------------------------------------------------ */
.priority-inbox { padding: 18px 20px; }
.priority-inbox-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.priority-inbox-head h3 { margin: 0; }
.priority-inbox-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.priority-inbox-item { border-radius: 8px; transition: background-color .12s ease; }
.priority-inbox-item:hover { background: var(--c-surface-2); }
.priority-inbox-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: inherit; text-decoration: none; }
.priority-inbox-link:hover { text-decoration: none; }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.priority-high   .priority-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.priority-medium .priority-dot { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.18); }
.priority-low    .priority-dot { background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.priority-inbox-text { flex: 1; min-width: 0; font-size: var(--text-base); }
.priority-inbox-text strong { color: var(--c-text); }
.priority-inbox-group { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.priority-inbox-arrow { color: var(--c-muted); flex-shrink: 0; transition: transform .12s ease, color .12s ease; }
.priority-inbox-item:hover .priority-inbox-arrow { color: var(--c-primary); transform: translateX(3px); }
[data-theme="dark"] .priority-inbox-item:hover { background: var(--c-surface-2); }
.brand-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; background: #fff; padding: 2px; }

/* ------------------------------------------------------------------ */
/*  Navigation aids — breadcrumbs, workflow stepper, glossary tooltip */
/* ------------------------------------------------------------------ */
.breadcrumbs { margin: 0 0 14px; font-size: var(--text-sm); color: var(--c-muted); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: "›"; margin-right: 10px; color: var(--c-border); }
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-primary); text-decoration: none; }
.breadcrumbs li[aria-current="page"] { color: var(--c-text); font-weight: 600; }

/* Workflow stepper used in the accreditation flow */
.workflow-stepper { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.workflow-stepper .ws-step { display: flex; align-items: center; flex: 1 1 auto; min-width: 120px; }
.workflow-stepper .ws-step + .ws-step::before { content: ""; height: 2px; width: 16px; background: var(--c-border); align-self: center; }
.workflow-stepper .ws-step a, .workflow-stepper .ws-step > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--c-muted); border: 1px solid var(--c-border); background: var(--c-surface); font-size: var(--text-md); }
.workflow-stepper .ws-step a:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.workflow-stepper .ws-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-surface-2); color: var(--c-muted); font-size: var(--text-sm); font-weight: 700; }
.workflow-stepper .ws-current > span,
.workflow-stepper .ws-current { font-weight: 600; }
.workflow-stepper .ws-current > span { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.workflow-stepper .ws-current .ws-num { background: rgba(255,255,255,.25); color: #fff; }
.workflow-stepper .ws-done a, .workflow-stepper .ws-done > span { color: var(--c-success); border-color: rgba(22,163,74,.4); }
.workflow-stepper .ws-done .ws-num { background: rgba(22,163,74,.18); color: var(--c-success); }

/* Glossary inline tooltip — keyboard- and touch-friendly */
.glossary-term { position: relative; border-bottom: 1px dotted var(--c-muted); cursor: help; }
.glossary-term:focus { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.glossary-popup { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 240px; max-width: 360px; background: #0f172a; color: #f1f5f9; padding: 8px 10px; border-radius: 6px; font-size: var(--text-sm); line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 30; }
.glossary-term:hover .glossary-popup,
.glossary-term:focus .glossary-popup,
.glossary-term:focus-within .glossary-popup { opacity: 1; }
.glossary-popup strong { color: #93c5fd; }

/* ------------------------------------------------------------------ */
/*  Sidebar — collapsible nav groups                                  */
/* ------------------------------------------------------------------ */
.nav-group { margin-top: 4px; }
.nav-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 12px 10px 4px; user-select: none; color: #7C90AC; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: color .14s; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::before { content: "▸"; font-size: 9px; transition: transform .14s ease; color: #5E739A; }
.nav-group[open] > summary::before { transform: rotate(90deg); }
.nav-group > summary:hover { color: #DCE6F2; }
.nav-group-body { display: flex; flex-direction: column; gap: 2px; padding-left: 0; }

/* ------------------------------------------------------------------ */
/*  Curriculum map — mobile friendliness (sticky first column)        */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .curriculum-map .cm-corner,
    .curriculum-map .cm-plo {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--c-surface);
        min-width: 150px;
        box-shadow: 1px 0 0 var(--c-border);
    }
    .curriculum-map .cm-corner { background: var(--c-surface-2); }
    .curriculum-map .cm-cell { width: 48px; height: 40px; }
    .curriculum-map .cm-courseh { height: 90px; min-width: 40px; }
    .curriculum-map .cm-courseh span { font-size: var(--text-xs); }
}
[data-theme="dark"] .curriculum-map .cm-plo { background: var(--c-surface); }

/* ------------------------------------------------------------------ */
/*  Responsive tables — let cards scroll on phones                    */
/* ------------------------------------------------------------------ */
.card .table { min-width: 100%; }
@media (max-width: 768px) {
    /* Any card whose direct child is a wide table becomes horizontally
       scrollable below the standard tablet breakpoint. Keeps the rest of
       the card's content (h3, intro p) full-width. */
    .card > .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card > .table > thead,
    .card > .table > tbody { display: table; width: 100%; min-width: 540px; }
    /* Forms that use grid-template-columns:repeat(3,1fr) inline collapse
       to a single column below 768. */
    form[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------ */
/*  Toast — flash success / error messages after a redirect           */
/* ------------------------------------------------------------------ */
.da-toast { position: fixed; bottom: 24px; right: 24px; max-width: 420px; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 8px; background: #0f172a; color: #f1f5f9; box-shadow: 0 12px 32px rgba(0,0,0,.25);
    z-index: 1000; transform: translateY(0); animation: da-toast-in .18s ease; }
.da-toast-notice { border-left: 4px solid #16a34a; }
.da-toast-error  { border-left: 4px solid #dc2626; }
.da-toast-icon   { font-size: 18px; }
.da-toast-notice .da-toast-icon { color: #4ade80; }
.da-toast-error  .da-toast-icon { color: #f87171; }
.da-toast-body   { flex: 1; font-size: var(--text-md); line-height: 1.4; }
.da-toast-close  { background: transparent; border: 0; color: #94a3b8; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 8px; min-height: 0; }
.da-toast-close:hover { color: #fff; }
.da-toast.da-toast-leaving { transform: translateY(40px); opacity: 0; transition: transform .18s ease, opacity .18s ease; }
@keyframes da-toast-in { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Inline-progress button state for #4 (loading on long ops) */
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.75; position: relative; }
.btn[aria-busy="true"]::after {
    content: ""; width: 12px; height: 12px; border-radius: 50%; margin-left: 8px;
    border: 2px solid currentColor; border-right-color: transparent; animation: da-spin .7s linear infinite;
}
@keyframes da-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/*  Modal (used by global confirm dialog)                             */
/* ------------------------------------------------------------------ */
.da-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.55); z-index: 2000; padding: 16px; }
.da-modal[hidden] { display: none; }
.da-modal-panel { background: var(--c-surface); color: var(--c-text); border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.35); padding: 22px 24px; max-width: 440px; width: 100%; }
.da-modal-title { margin: 0 0 8px; font-size: 18px; }
.da-modal-body { margin: 0 0 18px; color: var(--c-muted); font-size: var(--text-base); line-height: 1.5; }
.da-modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Visible focus-ring on every interactive control (a11y). Uses :focus-visible
   so mouse clicks don't show the ring; keyboard / programmatic focus do. */
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.glossary-term:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/*  Form grid utilities — replaces ad-hoc inline styles on <form>     */
/* ------------------------------------------------------------------ */
.form-grid       { display: grid; gap: 10px; }
.form-grid-2col  { grid-template-columns: 1fr 2fr; }
.form-grid-3col  { grid-template-columns: repeat(3, 1fr); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 768px) {
    .form-grid-2col, .form-grid-3col { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/*  Inline editor inside a list item — used on plan show page         */
/*  (edit group, edit track) and anywhere we want a compact form      */
/*  that auto-collapses on narrow screens.                            */
/* ------------------------------------------------------------------ */
.plan-inline-editor {
    margin: 8px 0 4px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
}
.plan-inline-editor label { display: block; font-size: var(--text-sm); color: var(--c-muted); }
.plan-inline-editor label > input,
.plan-inline-editor label > select,
.plan-inline-editor label > textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
}
.plan-inline-editor .full { grid-column: 1 / -1; }
.plan-inline-editor .section-divider {
    grid-column: 1 / -1;
    border-top: 1px dashed #cbd5e1;
    padding-top: 8px;
    margin-top: 4px;
    font-size: var(--text-xs);
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.plan-inline-editor .check-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--c-text);
}
.plan-inline-editor .check-row input { width: auto; margin-top: 2px; }
.plan-inline-editor .actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
@media (max-width: 540px) {
    .plan-inline-editor {
        grid-template-columns: 1fr;
        padding: 10px;
    }
    .plan-inline-editor .actions .btn { flex: 1 1 auto; }
}
/* The summary button that toggles a .plan-inline-editor open should feel
   like the rest of the action row, not the tiny default <summary>. */
details > summary.btn { list-style: none; cursor: pointer; }
details > summary.btn::-webkit-details-marker { display: none; }
details[open] > summary.btn::after { content: " ▴"; opacity: 0.6; }
details:not([open]) > summary.btn::after { content: " ▾"; opacity: 0.6; }

/* ------------------------------------------------------------------ */
/*  Empty-state — consistent "nothing here yet" block with CTA        */
/* ------------------------------------------------------------------ */
.empty-state { padding: 28px 20px; text-align: center; color: var(--c-muted); }
.empty-state-icon { font-size: 28px; opacity: 0.55; margin-bottom: 6px; display: block; }
.empty-state-title { margin: 0 0 4px; color: var(--c-text); font-size: 15px; font-weight: 600; }
.empty-state-body { margin: 0 auto 12px; max-width: 36em; font-size: var(--text-md); line-height: 1.5; }
.empty-state .btn { font-size: var(--text-md); }

/* ------------------------------------------------------------------ */
/*  Inline field validation — paired with form JS that sets            */
/*  aria-invalid on the input and shows the matching .field-error span */
/*  instead of firing a native alert().                                */
/* ------------------------------------------------------------------ */
.field-error {
    display: none;
    margin-top: 4px;
    color: var(--c-error);
    font-size: var(--text-sm);
    font-weight: 500;
}
.field-error[data-show="1"] { display: block; }
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--c-error);
    box-shadow: 0 0 0 1px var(--c-error);
}
/* ------------------------------------------------------------------ */
/*  Overflow "More actions" menu — native <details> disclosure so a    */
/*  long header action row collapses secondary/destructive items.      */
/* ------------------------------------------------------------------ */
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary::after { content: " ▾"; opacity: 0.6; }
.action-menu[open] > summary::after { content: " ▴"; }
.action-menu-pop {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
    display: flex; flex-direction: column; gap: 2px; min-width: 210px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: 6px; box-shadow: var(--shadow-2);
}
.action-menu-pop .btn,
.action-menu-pop form { width: 100%; }
.action-menu-pop .btn { justify-content: flex-start; border-color: transparent; background: transparent; }
.action-menu-pop .btn:hover { background: var(--c-surface-2); }
.action-menu-pop .btn-danger { color: var(--c-error); }
.action-menu-pop .btn-danger:hover { background: #fef2f2; }
[data-theme="dark"] .action-menu-pop .btn-danger:hover { background: rgba(220,38,38,.18); }
.action-menu-pop hr { border: 0; border-top: 1px solid var(--c-border); margin: 4px 0; }

/* Required-field marker — every <label> that contains a required form
   control gets a red asterisk prefix. Uses :has() (Chrome 105+, Firefox 121+,
   Safari 15.4+); on older browsers labels appear unmarked but submission
   still blocks via the native required validation. */
label:has(input:required, select:required, textarea:required)::before {
    content: '* ';
    color: #dc2626;
    font-weight: 700;
}

/* Chart tooltip — wired in app.js, triggered by any [data-tip] element */
.chart-tooltip {
    position: fixed; pointer-events: none; z-index: 9999;
    background: #0f172a; color: #f8fafc;
    padding: 6px 10px; border-radius: 6px;
    font-size: var(--text-sm); line-height: 1.4;
    box-shadow: 0 4px 12px rgba(15,23,42,.35);
    max-width: 280px; white-space: pre-wrap;
    transition: opacity .08s ease;
}
[data-tip] { cursor: default; }
svg [data-tip] { cursor: pointer; }

/* ------------------------------------------------------------------ */
/*  Plan-editor: drag-and-drop group reordering                       */
/* ------------------------------------------------------------------ */
ul[data-groups-reorder] { list-style: none; padding-left: 0; }
ul[data-groups-reorder] > li[data-group-id] {
    position: relative;
    padding: 10px 12px 10px 36px;
    margin: 6px 0;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-border, #e2e8f0);
    border-radius: 8px;
    cursor: grab;
    transition: box-shadow .12s, transform .12s;
}
ul[data-groups-reorder] > li[data-group-id]:hover { box-shadow: 0 1px 2px rgba(15,23,42,.06); }
ul[data-groups-reorder] > li[data-group-id]::before {
    content: "⋮⋮";
    position: absolute;
    left: 12px;
    top: 12px;
    color: var(--c-muted, #94a3b8);
    font-weight: 700;
    letter-spacing: -1px;
    font-size: var(--text-base);
    line-height: 1;
}
ul[data-groups-reorder] > li[data-group-id].drag-source {
    opacity: 0.4;
    cursor: grabbing;
}
ul[data-groups-reorder] > li[data-group-id].drag-over {
    border-color: var(--c-primary, #1f4ed8);
    box-shadow: 0 0 0 2px rgba(31,78,216,.18);
}
.reorder-status {
    display: inline-block;
    margin: 0 0 8px;
    padding: 3px 10px;
    font-size: var(--text-sm);
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
}
.reorder-status.is-busy { background: #dbeafe; color: #1e40af; }
.reorder-status.is-ok   { background: #dcfce7; color: #166534; }
.reorder-status.is-err  { background: #fee2e2; color: #991b1b; }

/* ------------------------------------------------------------------ */
/*  Long-table polish: sticky headers + client-side filter row        */
/* ------------------------------------------------------------------ */
.table-wrap { max-height: 70vh; overflow-y: auto; border: 1px solid var(--c-border, #e2e8f0); border-radius: 8px; }
.table-wrap > .table { border: 0; }
.table-wrap > .table thead th {
    position: sticky;
    top: 0;
    background: var(--c-surface, #fff);
    z-index: 2;
    box-shadow: 0 1px 0 var(--c-border, #e2e8f0);
}
.table-quickfilter {
    display: flex; gap: 10px; align-items: center;
    margin: 0 0 10px; padding: 6px 10px;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-border, #e2e8f0);
    border-radius: 8px;
}
.table-quickfilter input {
    flex: 1; border: 0; outline: 0; padding: 6px 4px; font-size: var(--text-base); background: transparent;
}
.table-quickfilter .count { font-size: var(--text-sm); color: var(--c-muted, #64748b); white-space: nowrap; }
.table-quickfilter .clear {
    border: 0; background: transparent; cursor: pointer; color: var(--c-muted, #64748b);
    font-size: 16px; padding: 2px 6px;
}
.table-quickfilter .clear:hover { color: var(--c-text, #0f172a); }
tr.is-filtered-out { display: none; }

/* ------------------------------------------------------------------ */
/*  Accessibility: skip-to-main link (visible only on focus)          */
/* ------------------------------------------------------------------ */
.skip-link {
    position: absolute;
    top: -40px;
    left: 12px;
    background: var(--c-primary, #1f4ed8);
    color: #fff;
    padding: 8px 14px;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-size: var(--text-md);
    font-weight: 600;
    z-index: 9999;
    transition: top .15s;
}
.skip-link:focus-visible { top: 0; outline: 3px solid #fde68a; outline-offset: -3px; }

/* ------------------------------------------------------------------ */
/*  Sortable table-header indicators                                  */
/* ------------------------------------------------------------------ */
.th-sortable { cursor: pointer; user-select: none; position: relative; }
.th-sortable:hover { color: var(--c-text, #0f172a); }
.th-sort-indicator {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: .35;
    border-top: 5px solid currentColor;
    vertical-align: middle;
}
.th-sortable.is-sort-asc .th-sort-indicator {
    border-top: 0;
    border-bottom: 5px solid currentColor;
    opacity: 1;
}
.th-sortable.is-sort-desc .th-sort-indicator {
    opacity: 1;
}
.th-sortable:focus-visible { outline: 2px solid var(--c-primary, #1f4ed8); outline-offset: -2px; }

/* ------------------------------------------------------------------ */
/*  Inline-editable capacity cell (admin/offerings index)             */
/* ------------------------------------------------------------------ */
/* Offering delivery-mode badges                                       */
/* ------------------------------------------------------------------ */
.mode-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}
.mode-badge.mode-in-person { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.mode-badge.mode-online    { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.mode-badge.mode-hybrid    { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* ------------------------------------------------------------------ */
.capacity-cell { white-space: nowrap; }
.capacity-cell .capacity-enrolled { font-variant-numeric: tabular-nums; }
.capacity-cell .capacity-sep { margin: 0 4px; color: var(--c-muted, #94a3b8); }
.capacity-cell .capacity-input {
    width: 64px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
    transition: border-color .12s, background .12s;
}
.capacity-cell:hover .capacity-input,
.capacity-cell .capacity-input:focus {
    border-color: var(--c-border, #cbd5e1);
    background: var(--c-surface, #fff);
    outline: none;
}
.capacity-cell .capacity-input:focus { border-color: var(--c-primary, #1f4ed8); }
.capacity-cell .capacity-input:disabled { opacity: 0.6; }
.capacity-status {
    display: inline-block;
    margin-left: 6px;
    font-size: var(--text-xs);
    color: var(--c-muted, #64748b);
    min-width: 0;
}
.capacity-status.is-busy { color: #1e40af; }
.capacity-status.is-ok   { color: #166534; }
.capacity-status.is-err  { color: #991b1b; }

/* ------------------------------------------------------------------ */
/*  Mobile-responsive pass                                            */
/*  Desktop-first views use inline multi-column grids and wide        */
/*  tables; these rules make them usable on phones/tablets without    */
/*  touching every template. The drawer sidebar + hamburger are       */
/*  handled by the earlier (max-width:900px) block.                   */
/* ------------------------------------------------------------------ */

/* Tablet & down: let any wide table scroll horizontally inside its card
   instead of forcing the page wider than the viewport. */
@media (max-width: 768px) {
    .card > .table,
    .card .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .card { overflow-x: hidden; }      /* contain the scrolling table */
    main, .content, .page { max-width: 100%; }
}

/* Phones: collapse fixed multi-column layouts to a single column. This
   targets the inline `grid-template-columns` used throughout the admin
   forms/cards (inline styles, so !important is required to override). */
@media (max-width: 640px) {
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .kpis { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

    /* Inline flex toolbars (filters, action rows) should wrap + go full width. */
    [style*="display:flex"],
    [style*="display: flex"] { flex-wrap: wrap; }

    /* Make form controls comfortable to tap and never overflow. */
    input, select, textarea, .btn { max-width: 100%; }
    .btn { min-height: 42px; }

    /* Page padding tightens on small screens. */
    main, .content, .page { padding-left: 12px; padding-right: 12px; }
    .card { padding: 16px; }
    .kpi-value, .stat-card .stat-value { font-size: 22px; }
}


/* ================================================================== */
/*  Design-system webfonts (self-hosted; CSP font-src 'self').        */
/* ================================================================== */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('/assets/fonts/source-sans-3-var-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Source Sans 3';
    font-style: italic; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/source-sans-3-italic-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal; font-weight: 400 600; font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
body { font-family: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

@keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ================================================================== */
/*  Component styles recovered after the design-system token refresh.  */
/*  Re-styled on the navy→cyan spine; selectors absent from the base.  */
/* ================================================================== */
/* Tabular numerals everywhere data lives. */
table, .tnum, [data-numeric] { font-variant-numeric: tabular-nums; }
/* Mono for IDs, codes, GPAs, amounts. */
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Uppercase eyebrow / section label. */
.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
/* 60px white top bar on a hairline (design: .cur-topbar). */
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    min-height: 60px;
    padding: 10px 24px; background: var(--c-surface); border-bottom: 1px solid var(--c-border);
    gap: 12px;
}
/* Buttons — semibold, 7px corners, 0.5px press nudge (design: .cur-btn). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px;
    border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--font-sans); font-weight: 600;
    font-size: var(--text-base); cursor: pointer; min-height: 36px;
    box-shadow: 0 1px 1px rgba(20, 26, 34, 0.04);
    transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--c-primary-strong); }
.btn-ghost:hover { background: var(--c-primary-soft); border-color: transparent; }
/* Badges — pills with bg/fg/border triads (design: .cur-badge). */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); }
/* Auth — centered card on the light slate page (forgot / reset / MFA),
   plus a split-screen sign-in: brand-gradient hero panel + white form
   (design: .cur-login). The gradient is reserved for this hero moment. */
.auth-page { background: var(--c-bg); min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-sub { color: var(--c-muted); font-size: var(--text-base); margin: 0 0 20px; }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--c-surface); color: var(--c-primary); border: 1px solid var(--c-primary); font-weight: 600; margin-bottom: 6px; transition: background .15s ease, color .15s ease; }
.sso-btn:hover { background: var(--c-primary); color: #fff; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--c-muted); font-size: var(--text-sm); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
/* Sign-in split layout (login page only). */
.auth-split { background: var(--c-surface); min-height: 100vh; margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.auth-hero {
    background: var(--brand-gradient); color: #fff; padding: 56px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.auth-hero-brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; }
.auth-hero-brand img { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.15); padding: 2px; }
.auth-hero-tag { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; max-width: 420px; }
.auth-hero-sub { font-size: 15px; opacity: .85; margin-top: 14px; max-width: 380px; line-height: 1.55; }
.auth-hero-foot { font-size: 13px; opacity: .7; }
.auth-pane { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-split .auth-card { border: 0; box-shadow: none; padding: 0; max-width: 380px; }
.auth-split .auth-brand { display: none; }
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-pane { align-items: flex-start; padding-top: 64px; }
  .auth-split .auth-brand { display: flex; }
}
.qs-type-section   { background: #cffafe; color: #155e75; }
.qs-type-applicant { background: #ffe4e6; color: #9f1239; }
.qs-type-employee  { background: #EFF2F6; color: #36404E; }
.qs-type-user      { background: #EFF2F6; color: #36404E; }
.qs-type-action    { background: #fef9c3; color: #854d0e; }
.qs-type-recent    { background: #E2E7EE; color: #4D596B; }
[data-theme="dark"] .qs-type-section   { background: #164e63; color: #a5f3fc; }
[data-theme="dark"] .qs-type-applicant { background: #881337; color: #fecdd3; }
[data-theme="dark"] .qs-type-action    { background: #713f12; color: #fef08a; }
[data-theme="dark"] .qs-type-employee,
[data-theme="dark"] .qs-type-user,
[data-theme="dark"] .qs-type-recent    { background: #243049; color: #CBD3DE; }
/* ---- Contract / e-signature document ------------------------------------ */
.doc.contract-render, .contract-preview.contract-render { white-space: normal; }
.contract-preview {
    background: #fff; border: 1px solid var(--c-border); border-radius: 10px;
    padding: 28px 32px; max-height: 520px; overflow: auto;
    box-shadow: inset 0 0 0 1px rgba(20,26,34,.02);
}
.contract-doc { color: #1f2937; font-size: 14.5px; line-height: 1.62; max-width: 720px; margin: 0 auto; }
.contract-doc .contract-head { text-align: center; border-bottom: 2px solid var(--c-primary); padding-bottom: 12px; margin-bottom: 18px; }
.contract-doc .contract-org { font-size: 22px; font-weight: 800; letter-spacing: .01em; color: var(--c-primary); }
.contract-doc .contract-org-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--c-muted); margin-top: 3px; }
.contract-doc .contract-title { text-align: center; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; margin: 10px 0 2px; }
.contract-doc .contract-meta { text-align: center; color: var(--c-muted); font-size: 12px; margin: 0 0 18px; }
.contract-doc h2 { font-size: 14px; margin: 16px 0 4px; color: #141A22; }
.contract-doc p { margin: 0 0 8px; text-align: justify; }
.contract-doc .contract-parties { margin-bottom: 14px; }
.contract-doc .contract-ack { margin-top: 16px; }
.contract-doc .contract-sign { width: 100%; border-collapse: collapse; margin-top: 24px; }
.contract-doc .contract-sign th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); padding: 0 16px 4px 0; width: 50%; border: 0; }
.contract-doc .contract-sign td { vertical-align: top; padding: 16px 16px 0 0; border: 0; }
.contract-doc .sig-line { border-bottom: 1.5px solid #36404E; height: 34px; margin-bottom: 6px; }
.contract-doc .sig-name { font-weight: 600; }
.contract-doc .sig-role, .contract-doc .sig-date { font-size: 12px; color: var(--c-muted); }
[data-theme="dark"] .contract-preview { background: var(--c-surface); }
[data-theme="dark"] .contract-doc { color: #CBD3DE; }
[data-theme="dark"] .contract-doc h2 { color: #E2E7EE; }
[data-theme="dark"] .contract-doc .sig-line { border-bottom-color: #9AA6B6; }
/* ---- Advising "needs attention" cockpit --------------------------------- */
.seg { display:inline-flex; border:1px solid var(--c-border); border-radius:8px; overflow:hidden; }
.seg-btn { padding:6px 12px; font-size:13px; color:var(--c-muted); text-decoration:none; }
.seg-btn.on { background:var(--c-primary); color:#fff; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 4px; }
.kpi-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--shadow-1); }
.kpi-card .kpi-n { font-size:28px; font-weight:700; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1; }
.kpi-card .kpi-l { font-size:12px; color:var(--c-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.04em; }
.kpi-high .kpi-n { color:var(--c-error); }
.kpi-mod .kpi-n { color:var(--c-warning); }
.kpi-hold .kpi-n { color:var(--brand-navy); }
.kpi-cold .kpi-n { color:var(--c-accent); }
.kpi-watch .kpi-n { color:var(--c-primary); }
.cockpit-list { display:flex; flex-direction:column; }
.cockpit-row { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:flex-start;
    padding:14px 4px; border-bottom:1px solid var(--c-border); }
.cockpit-row:last-child { border-bottom:none; }
.risk-badge { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:18px; color:#fff; }
.risk-badge.band-high { background:var(--c-error); }
.risk-badge.band-moderate { background:var(--c-warning); }
.risk-badge.band-low { background:var(--c-success); }
.cockpit-name { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; }
.cockpit-name .muted { font-weight:400; font-size:13px; }
.watch-btn { background:none; border:none; cursor:pointer; font-size:18px; color:#CBD3DE; line-height:1; padding:0; }
.watch-btn.on { color:var(--c-warning); }
.cockpit-factors { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.factor-chip { font-size:11px; background:var(--bad-bg); color:var(--bad-fg); border:1px solid #fecaca; border-radius:999px; padding:2px 9px; }
[data-theme="dark"] .factor-chip { background:#3f1d1d; color:#fecaca; border-color:#7f1d1d; }
.cockpit-meta { font-size:12.5px; color:var(--c-text); }
.cockpit-meta .pill { font-size:11px; border-radius:999px; padding:1px 8px; }
.pill-hold { background:#ede9fe; color:#5b21b6; }
.pill-fail { background:var(--warn-bg); color:var(--warn-fg); }
.contact-label.cold { color:#0891b2; font-weight:600; }
.cockpit-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.cockpit-panel { grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    margin-top:8px; padding:10px 12px; background:var(--c-surface-2); border-radius:8px; }
.cockpit-panel input[type=text] { flex:1; min-width:160px; }
.cockpit-panel textarea { flex:1; min-width:220px; }
@media (max-width:700px) {
  .cockpit-row { grid-template-columns:auto 1fr; }
  .cockpit-actions { grid-column:1 / -1; justify-content:flex-start; }
}
/* Cockpit v2: score rings, band group headers, live-signal chips,
   GPA sparkline, degree-completion mini bar, cohort factor strip. */
.cockpit-row { transition:background .12s ease; border-radius:8px; }
.cockpit-row:hover { background:var(--c-surface-2); }
.cockpit-band-head { display:flex; align-items:center; gap:10px; margin:16px 0 4px; font-size:11.5px; font-weight:800;
    text-transform:uppercase; letter-spacing:.06em; }
.cockpit-band-head::after { content:""; flex:1; height:1px; background:var(--c-border); }
.cockpit-band-head.bh-high { color:var(--c-error); }
.cockpit-band-head.bh-moderate { color:var(--c-warning); }
.cockpit-band-head.bh-low { color:var(--c-success); }
.risk-ring { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;
    background:conic-gradient(var(--ring) calc(var(--p) * 1%), var(--c-border) 0); }
.risk-ring.band-high { --ring:var(--c-error); }
.risk-ring.band-moderate { --ring:var(--c-warning); }
.risk-ring.band-low { --ring:var(--c-success); }
.risk-ring .rr-in { width:40px; height:40px; border-radius:50%; background:var(--c-surface); display:flex; align-items:center;
    justify-content:center; font-weight:800; font-size:14px; color:var(--ring); }
.spark { vertical-align:middle; margin-left:4px; }
.spark polyline { stroke:var(--c-muted); }
.spark circle { fill:var(--c-muted); }
.spark.spark-up polyline { stroke:var(--c-success); }
.spark.spark-up circle { fill:var(--c-success); }
.spark.spark-down polyline { stroke:var(--c-error); }
.spark.spark-down circle { fill:var(--c-error); }
.signal-chip { font-size:11px; font-weight:700; border-radius:999px; padding:2px 9px; }
.signal-chip.sig-danger { background:var(--c-error); color:#fff; }
.signal-chip.sig-warn { background:var(--warn-bg); color:var(--warn-fg); border:1px solid #fcd34d; }
[data-theme="dark"] .signal-chip.sig-warn { background:#451a03; color:#fcd34d; border-color:var(--warn-fg); }
.cockpit-common { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; margin:0 0 4px; padding:0 4px; }
.degree-mini { display:flex; align-items:center; gap:8px; margin:4px 0 6px; max-width:420px; }
.degree-mini .dm-track { flex:1; height:6px; border-radius:999px; background:var(--c-border); overflow:hidden; }
.degree-mini .dm-fill { height:100%; border-radius:999px; background:var(--c-primary); }
.degree-mini .dm-fill.el-eligible { background:var(--c-success); }
.degree-mini .dm-fill.el-near { background:var(--c-warning); }
.degree-mini .dm-label { font-size:11.5px; color:var(--c-muted); white-space:nowrap; }
/* Shared server-rendered chart components (views/partials/charts.php) —
   used by the HR + finance dashboards. CSP-safe, dark-mode aware. */
.donut-center { font-size: 21px; font-weight: 800; fill: var(--c-text); }
.donut-sub { font-size: 10px; fill: var(--c-muted); }
.chart-legend { list-style:none; padding:0; margin:8px 0 0; font-size:12.5px; display:flex; flex-direction:column; gap:4px; }
.chart-legend .dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.chart-side { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hbars { display:flex; flex-direction:column; gap:7px; }
.hbar-row { display:grid; grid-template-columns: minmax(70px, 30%) 1fr auto; gap:10px; align-items:center; font-size:12.5px; }
.hbar-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar-track { height:10px; border-radius:999px; background:var(--c-surface-2); overflow:hidden; }
.hbar-fill { display:block; height:100%; border-radius:999px; }
.hbar-val { font-weight:700; font-variant-numeric: tabular-nums; }
.queue-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.queue-card { display:block; text-decoration:none; color:inherit; background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--shadow-1); transition:transform .1s ease, box-shadow .1s ease; }
.queue-card:hover { transform:translateY(-1px); box-shadow:var(--shadow-2, 0 4px 12px rgba(2,6,23,.08)); }
.queue-card .qc-n { font-size:26px; font-weight:800; line-height:1.1; }
.queue-card .qc-n.hot { color:var(--c-error); }
.queue-card .qc-l { font-size:12px; color:var(--c-muted); margin-top:3px; }
.stat-chips { display:flex; gap:8px; flex-wrap:wrap; }
.stat-chip { font-size:12px; border:1px solid var(--c-border); background:var(--c-surface); border-radius:999px; padding:4px 12px; }
.stat-chip strong { font-variant-numeric: tabular-nums; }
.balance-bar { margin:0 0 10px; }
.balance-bar .bb-head { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:3px; }
.balance-bar .bb-track { height:9px; border-radius:999px; background:var(--c-surface-2); overflow:hidden; display:flex; }
.balance-bar .bb-used { background:var(--c-primary); }
.balance-bar .bb-pending { background:var(--c-warning); }
/* Stripe card element (student finance portal) */
.stripe-card-element { border:1px solid var(--c-border); border-radius:var(--r-sm); padding:11px 12px; background:var(--c-surface); }
.stripe-card-element.StripeElement--focus { outline:2px solid var(--c-primary); outline-offset:1px; }
/* ------------------------------------------------------------------ */
/*  Phase-1 UX additions (docs/ux/07-implementation-roadmap.md)       */
/* ------------------------------------------------------------------ */

/* Required-field marker. Opt-in per <form class="mark-required"> because
   many older views hand-write the asterisk in the label text; auto-marking
   those would double it. New forms should use the class instead of literal
   stars. Pair with a "* required" legend (.required-legend) on long forms. */
form.mark-required label:has(input[required], select[required], textarea[required])::before {
    content: "* ";
    color: var(--c-error);
    font-weight: 600;
}
.required-legend { font-size: var(--text-sm); color: var(--c-muted); margin: 0 0 12px; }
.required-legend::before { content: "* "; color: var(--c-error); font-weight: 600; }
/* Layout utilities — the sanctioned replacements for the most common inline
   styles (design system §4.3). Do not add new style="" attributes in views. */
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.flex-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.stack-1 { margin-top: 4px; }
.stack-2 { margin-top: 8px; }
.stack-3 { margin-top: 12px; }
.stack-4 { margin-top: 16px; }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.w-full { width: 100%; }
/* Tab row (server-rendered links, e.g. the student profile ?tab=…). */
.tabs {
    display: flex; gap: 2px; flex-wrap: wrap;
    border-bottom: 1px solid var(--c-border);
    margin: 0 0 16px;
}
.tabs .tab {
    padding: 9px 16px;
    color: var(--c-muted);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tabs .tab:hover { color: var(--c-text); text-decoration: none; }
.tabs .tab-active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}
/* Skeleton loading placeholders (perceived performance; roadmap 2.10).
   Usage: <div class="skeleton skeleton-text"></div> while async content
   loads. The shimmer respects prefers-reduced-motion via the global
   override at the top of this file. */
.skeleton {
    background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-border) 50%, var(--c-surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
    min-height: 14px;
}
.skeleton-text  { height: 14px; width: 70%; }
.skeleton-title { height: 22px; width: 40%; }
.skeleton-card  { height: 96px; width: 100%; }
/* ------------------------------------------------------------------ */
/*  Mobile layouts (roadmap 2.14)                                      */
/* ------------------------------------------------------------------ */

/* Stacked-card tables: opt-in via .table-cards + data-th="" on cells.
   Below 700px each row renders as a card with inline labels instead of
   a horizontally-scrolled table (registration offerings browser first). */
@media (max-width: 700px) {
    .table-cards { display: block; white-space: normal; }
    .table-cards thead { display: none; }
    .table-cards tbody { display: block; }
    .table-cards tr {
        display: block;
        border: 1px solid var(--c-border);
        border-radius: var(--r-md);
        padding: 10px 12px;
        margin-bottom: 10px;
        background: var(--c-surface);
    }
    .table-cards td {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        align-items: baseline;
        border: 0;
        padding: 4px 0;
        text-align: left !important;
    }
    .table-cards td::before {
        content: attr(data-th);
        color: var(--c-muted);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: .04em;
        flex: 0 0 84px;
    }
    .table-cards td[data-th=""]::before { display: none; }
}
/* Sticky cart bar on the registration page (phones only): cart count,
   credits, and a jump link to the cart panel stay reachable while
   browsing a long offerings list. */
.cart-bar { display: none; }
@media (max-width: 768px) {
  .cart-bar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 900;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--c-surface);
        border-top: 1px solid var(--c-border);
        box-shadow: 0 -4px 16px rgba(20, 26, 34, .12);
    }
  body:has(.cart-bar) .content { padding-bottom: 76px; }
}
/* Chat copilot next-step buttons (roadmap 3.3 v1). */
.chat-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 6px; }
/* Document-template editor (admin/hr/doc-templates). */
.doc-toolbar {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 8px; border: 1px solid var(--c-border); border-bottom: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--c-surface-2);
}
.doc-tb-group { display: inline-flex; gap: 4px; align-items: center; }
.doc-tb-group + .doc-tb-group { padding-left: 8px; border-left: 1px solid var(--c-border); }
.doc-tb-color { display: inline-flex; align-items: center; gap: 2px; font-size: 13px;
    border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 4px 6px;
    background: var(--c-surface); cursor: pointer; }
.doc-tb-color input[type=color] { width: 22px; height: 20px; border: 0; padding: 0; background: none; cursor: pointer; }
.doc-editor {
    min-height: 480px; border: 1px solid var(--c-border);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    padding: 28px 32px; background: #fff; color: #141A22;
    overflow: auto; line-height: 1.5;
}
[data-theme="dark"] .doc-editor { background: #fff; color: #141A22; }
/* documents print on white */
.doc-source {
    width: 100%; min-height: 480px; font-family: var(--font-mono); font-size: 12px;
    border: 1px solid var(--c-border); border-radius: 0 0 var(--r-sm) var(--r-sm);
    padding: 14px; background: var(--c-surface); color: var(--c-text);
}

/* ================================================================== */
/*  Department schedule board (/schedule)                              */
/* ================================================================== */
.sched { display: flex; flex-direction: column; gap: 16px; }

.sched-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  position: relative; overflow: hidden; }
.sched-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--brand-gradient); }
.sched-head-main { padding-left: 6px; }
.sched-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.sched-title { margin: 4px 0 2px; font-size: 22px; letter-spacing: -.01em; }
.sched-sub { color: var(--c-muted); font-size: 13.5px; }
.sched-controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.sched-select { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.sched-select select { min-width: 170px; }

/* KPIs */
.sched-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; }
.sched-kpi { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 13px 15px; box-shadow: var(--shadow-1); position: relative; }
.sched-kpi .sk-n { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--brand-navy); }
.sched-kpi .sk-l { font-size: 11px; color: var(--c-muted); margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }
.sk-fill .sk-n { color: var(--c-primary); }
.sk-enr .sk-n { color: var(--c-success); }
.sk-unstaffed .sk-n { color: var(--c-warning); }
.sk-online .sk-n { color: var(--c-accent); }

/* Filter bar */
.sched-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; }
.sf-search { display: flex; align-items: center; gap: 8px; background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: 999px; padding: 7px 14px; flex: 1; min-width: 220px; color: var(--c-muted); }
.sf-search input { border: none; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--c-text); padding: 0; }
.sf-search input:focus { outline: none; box-shadow: none; }
.sf-pill-select { border-radius: 999px; padding: 7px 12px; font-size: 13px; max-width: 200px; }
.sf-chips { display: inline-flex; gap: 4px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 999px; padding: 3px; }
.sf-chip { border: none; background: transparent; color: var(--c-muted); font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: background .12s, color .12s; }
.sf-chip:hover { color: var(--c-text); }
.sf-chip.on { background: var(--c-primary); color: #fff; box-shadow: 0 1px 3px rgba(31,115,184,.4); }
.sf-spacer { flex: 1; }
.sf-views { display: inline-flex; border: 1px solid var(--c-border); border-radius: 999px; overflow: hidden; }
.sf-view { border: none; background: var(--c-surface); color: var(--c-muted); font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; cursor: pointer; transition: background .12s, color .12s; }
.sf-view.on { background: var(--brand-navy); color: #fff; }
.sched-count { font-size: 12px; margin: -4px 2px 0; }

/* Timetable grid */
.sched-grid-card { padding: 0; overflow: hidden; }
.sched-grid { display: flex; align-items: stretch; }
.sg-times, .sg-col { display: flex; flex-direction: column; }
.sg-times { width: 56px; flex: none; border-right: 1px solid var(--c-border); }
.sg-corner { height: 38px; border-bottom: 1px solid var(--c-border); }
.sg-time { height: var(--px-hour); position: relative; }
.sg-time span { position: absolute; top: -7px; right: 8px; font-size: 10.5px; color: var(--c-subtle); font-variant-numeric: tabular-nums; }
.sg-col { flex: 1 1 0; border-right: 1px solid var(--c-border); min-width: 0; }
.sg-col:last-child { border-right: none; }
.sg-colhead { height: 38px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  color: var(--c-text); background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 2; }
.sg-colbody { position: relative; }
.sg-line { height: var(--px-hour); border-bottom: 1px dashed var(--c-border); }
.sg-line:nth-child(odd) { background: rgba(20,26,34,.015); }

.sg-block { position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 5px 7px; overflow: hidden;
  background: color-mix(in srgb, var(--bc) 13%, #fff); border: 1px solid color-mix(in srgb, var(--bc) 35%, #fff);
  border-left: 3px solid var(--bc); cursor: default; transition: transform .1s, box-shadow .1s, z-index 0s; }
.sg-block:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); z-index: 5; min-height: max-content; }
.sgb-code { font-size: 11.5px; font-weight: 800; color: color-mix(in srgb, var(--bc) 75%, #000); line-height: 1.1; letter-spacing: -.01em; }
.sgb-sec { font-weight: 600; opacity: .65; margin-left: 3px; }
.sgb-meta { font-size: 10px; color: var(--c-muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgb-inst { font-weight: 600; color: color-mix(in srgb, var(--bc) 55%, #000); }
.sgb-fill { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: color-mix(in srgb, var(--bc) 18%, #fff); }
.sgb-fill i { display: block; height: 100%; background: var(--bc); }

/* async (no meeting time) row under the grid */
.sched-async { border-top: 1px solid var(--c-border); padding: 12px 16px; background: var(--c-surface-2); }
.sched-async-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin-bottom: 8px; }
.sched-async-list { display: flex; flex-wrap: wrap; gap: 7px; }
.sched-async-chip { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--bc) 12%, #fff); border: 1px solid color-mix(in srgb, var(--bc) 30%, #fff);
  color: color-mix(in srgb, var(--bc) 65%, #000); }

/* List view */
.sched-list-card { padding: 6px 0; }
.sl-course { padding: 6px 16px 10px; border-bottom: 1px solid var(--c-border); }
.sl-course:last-child { border-bottom: none; }
.sl-course-head { display: flex; align-items: baseline; gap: 9px; padding: 8px 0 6px; }
.sl-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; align-self: center; }
.sl-code { font-weight: 800; font-size: 14px; letter-spacing: -.01em; }
.sl-cname { color: var(--c-text); font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-credits, .sl-deptbadge { font-size: 11.5px; white-space: nowrap; }
.sl-deptbadge { font-family: var(--font-mono, monospace); }
.sl-row { display: grid; grid-template-columns: 64px 168px 1fr 120px 96px 150px; gap: 12px; align-items: center;
  padding: 7px 8px; border-radius: 8px; font-size: 13px; transition: background .1s; }
.sl-row:hover { background: var(--c-surface-2); }
.sl-sec-badge { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--c-muted); }
.sl-days { display: inline-flex; gap: 2px; }
.sl-day { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
  border-radius: 4px; background: var(--c-surface-2); color: var(--c-subtle); border: 1px solid var(--c-border); }
.sl-day.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.sl-time { font-size: 12px; color: var(--c-text); margin-left: 8px; }
.sl-inst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-staffless { color: var(--c-warning); font-weight: 600; font-size: 12px; }
.sl-room { font-size: 12px; color: var(--c-muted); }
.sl-modebadge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.mb-in_person { background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); }
.mb-online { background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-bd); }
.mb-hybrid { background: var(--brand-soft-bg, #EAF3FB); color: var(--c-primary-strong); border: 1px solid var(--info-bd); }
.sl-enroll { display: flex; align-items: center; gap: 8px; }
.sl-bar { flex: 1; height: 7px; background: var(--c-surface-2); border-radius: 999px; overflow: hidden; }
.sl-bar i { display: block; height: 100%; background: var(--c-success); border-radius: 999px; }
.sl-bar i.is-high { background: var(--c-warning); }
.sl-bar i.is-full { background: var(--c-error); }
.sl-enr { font-size: 12px; color: var(--c-muted); white-space: nowrap; }

.sched-item.is-hidden, .sl-course.is-hidden { display: none !important; }
.sched-empty-filtered { padding: 24px 16px; text-align: center; }

@media (max-width: 720px) {
  .sl-row { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .sl-when, .sl-enroll { grid-column: 1 / -1; }
  .sched-grid { font-size: 11px; }
}

/* ================================================================== */
/*  Registration-hold colours — one hue per hold type + per block kind */
/* ================================================================== */
.badge-hold-advising      { background: #DBEAFE; color: #1E40AF; }
.badge-hold-financial     { background: #FEF3C7; color: #92400E; }
.badge-hold-academic      { background: #EDE9FE; color: #5B21B6; }
.badge-hold-immunization  { background: #CCFBF1; color: #115E59; }
.badge-hold-health        { background: #CCFBF1; color: #115E59; }
.badge-hold-library       { background: #CFFAFE; color: #155E75; }
.badge-hold-disciplinary  { background: #FEE2E2; color: #991B1B; }
.badge-hold-conduct       { background: #FEE2E2; color: #991B1B; }
.badge-hold-other         { background: #E2E8F0; color: #475569; }
/* what the hold blocks (small status pills) */
.badge-block-registration { background: #FEE2E2; color: #991B1B; }
.badge-block-transcript   { background: #FEF3C7; color: #92400E; }
.badge-block-grades       { background: #EDE9FE; color: #5B21B6; }
.badge-block-graduation   { background: #DBEAFE; color: #1E40AF; }
.badge-block-warn         { background: #E6F7FB; color: #0A6B83; }

[data-theme="dark"] .badge-hold-advising      { background: #1E3A8A; color: #BFDBFE; }
[data-theme="dark"] .badge-hold-financial     { background: #78350F; color: #FDE68A; }
[data-theme="dark"] .badge-hold-academic      { background: #4C1D95; color: #DDD6FE; }
[data-theme="dark"] .badge-hold-immunization,
[data-theme="dark"] .badge-hold-health        { background: #134E4A; color: #99F6E4; }
[data-theme="dark"] .badge-hold-library       { background: #164E63; color: #A5F3FC; }
[data-theme="dark"] .badge-hold-disciplinary,
[data-theme="dark"] .badge-hold-conduct       { background: #7F1D1D; color: #FECACA; }
[data-theme="dark"] .badge-hold-other         { background: #334155; color: #CBD5E1; }

/* Duplicated offering row — briefly highlighted when linked to via #anchor */
@keyframes offering-flash { 0% { background: #FEF9C3; } 100% { background: transparent; } }
tr.offering-row:target { animation: offering-flash 2.4s ease-out; }
tr.offering-row:target td:first-child { box-shadow: inset 3px 0 0 var(--c-primary); }

/* ================================================================== */
/*  Course-evaluation window pills + term grouping                     */
/* ================================================================== */
.eval-term-head { margin: 0 0 10px; font-size: 16px; letter-spacing: -.01em;
  padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.eval-campaign { padding: 10px 0; border-bottom: 1px solid var(--c-border); }
.eval-campaign:last-child { border-bottom: none; padding-bottom: 0; }
.eval-campaign-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eval-campaign-name { font-weight: 700; }
.eval-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 2px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.eval-pill-open     { background: var(--ok-bg);   color: var(--ok-fg);   border-color: var(--ok-bd); }
.eval-pill-done     { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.eval-pill-upcoming { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.eval-pill-closed   { background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-border); }

/* ================================================================== */
/*  Grade-appeal review timeline                                       */
/* ================================================================== */
.appeal-timeline { display: flex; flex-direction: column; }
.appeal-stage { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.appeal-stage:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 24px; bottom: -8px; width: 2px; background: var(--c-border); }
.appeal-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c-border); background: var(--c-surface); flex: none; margin-top: 3px; position: relative; z-index: 1; }
.appeal-stage.is-done .appeal-dot { background: var(--c-success); border-color: var(--c-success); }
.appeal-stage.is-current .appeal-dot { background: var(--c-primary); border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(31,115,184,.18); }
.appeal-stage.is-current { font-weight: 500; }

/* ---- Course-section enrolment demand (offerings list) ------------------- */
.demand-banner {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn-fg);
  border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; line-height: 1.5;
}
.demand-banner__ico { color: var(--c-warning); font-size: 12px; margin-top: 2px; }
.demand-banner strong { color: var(--c-text); }
.demand-cell { min-width: 120px; }
.demand-bar { height: 6px; background: var(--c-surface-2); border-radius: var(--r-full); overflow: hidden; min-width: 72px; }
.demand-bar__fill { display: block; height: 100%; border-radius: var(--r-full); }
.demand-fill-ok  { background: var(--ok-fg); }
.demand-fill-warn { background: var(--warn-fg); }
.demand-fill-bad { background: var(--bad-fg); }
.demand-meta { display: flex; gap: 6px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.demand-badge-ok   { background: var(--ok-bg);  color: var(--ok-fg);  border-color: var(--ok-bd); }
.demand-badge-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.demand-badge-bad  { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd); }
.demand-wait { font-size: 11px; color: var(--bad-fg); font-weight: 600; }
.demand-row.demand-high_demand > td:first-child { box-shadow: inset 3px 0 0 var(--c-error); }

/* ---- Copyright (auth pages + sidebar footer) --------------------------- */
.auth-copyright { margin: 18px 0 0; text-align: center; font-size: 11px; color: var(--c-subtle); }
.sidebar-copyright { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--sidebar-border);
  font-size: 10.5px; color: var(--sidebar-text-muted); text-align: center; }

/* ===================================================================== */
/*  Cursio 2.0 — display type, motion system, shell refinements          */
/*  (added with the redesign; see docs/REDESIGN.md for the full spec)     */
/* ===================================================================== */

/* Headings use the display family with tight tracking. */
h1, h2, h3, .h-display, .page-title, .brand-name, .stat-label {
    font-family: var(--font-display);
}
h1, h2, h3, .page-title { letter-spacing: -0.02em; }

/* Translucent, blurred topbar (defining feature of the new shell). */
.topbar {
    background: color-mix(in srgb, var(--c-surface) 80%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
[data-theme="dark"] .topbar {
    background: color-mix(in srgb, var(--c-surface) 78%, transparent);
}

/* ---- Motion utilities (mirror Cursio.dc.html) ---- */
@keyframes curRise { from { opacity:0; transform:translateY(15px) } to { opacity:1; transform:none } }
@keyframes curFade { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
@keyframes ringIn  { from { stroke-dashoffset:314.16 } to { stroke-dashoffset:0 } }
@keyframes lineDraw{ from { stroke-dashoffset:1 } to { stroke-dashoffset:0 } }

.cur-rise   { animation: curRise .5s var(--ease-rise) both; }
.cur-fade   { animation: curFade .14s ease both; }
.cur-stagger > * { animation: curRise .55s var(--ease-rise) both; }
.cur-stagger > *:nth-child(1){ animation-delay:.02s }
.cur-stagger > *:nth-child(2){ animation-delay:.09s }
.cur-stagger > *:nth-child(3){ animation-delay:.16s }
.cur-stagger > *:nth-child(4){ animation-delay:.23s }
.cur-stagger > *:nth-child(5){ animation-delay:.30s }
.cur-stagger > *:nth-child(6){ animation-delay:.37s }
.ring-anim  { animation: ringIn 1.15s cubic-bezier(.32,.72,.3,1) both; }
.line-draw  { stroke-dasharray:1; animation: lineDraw 1.4s cubic-bezier(.4,.6,.2,1) both; }

/* Opt-in hover lift for interactive cards (matches .cur-lift). */
.cur-lift, .card.is-interactive {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cur-lift:hover, .card.is-interactive:hover {
    transform: var(--lift-translate);
    box-shadow: var(--lift-shadow);
}

@media (prefers-reduced-motion: reduce) {
    .cur-rise, .cur-fade, .cur-stagger > *, .ring-anim { animation: none !important; }
    .line-draw { stroke-dasharray: none !important; animation: none !important; }
    .cur-lift, .card.is-interactive { transition: none; }
}

/* ===================================================================== */
/*  Cursio 2.0 — phase 2 shell: brand tile, AI CTA, topbar, card lift     */
/* ===================================================================== */
.sidebar .brand { display:flex; align-items:center; gap:11px; padding:22px 20px 16px; }
.brand-tile { width:38px; height:38px; flex:none; border-radius:11px; background:var(--accent);
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(217,102,62,.40); }
.brand-tile .brand-logo { width:22px; height:22px; object-fit:contain; border-radius:7px; }
.brand-id { line-height:1.05; display:flex; flex-direction:column; min-width:0; }
.sidebar .brand-name { font-family:var(--font-display); font-weight:800; font-size:19px; color:#fff; letter-spacing:-.02em; }
.brand-eyebrow { font-size:10.5px; color:var(--side-muted); font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-top:2px; }

.ai-cta-wrap { padding:0 14px 12px; }
.ai-cta { width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px;
    border:1px solid var(--side-border); background:rgba(255,255,255,.04); color:#fff; cursor:pointer;
    font-family:var(--font-sans); font-size:13.5px; font-weight:600; text-align:left;
    transition:background var(--dur-fast) var(--ease-standard); }
.ai-cta:hover { background:rgba(255,255,255,.10); }
.ai-cta-label { flex:1; }

.topbar-title { flex:1; min-width:0; }
.topbar-eyebrow { font-size:11.5px; color:var(--text-3); font-weight:600; letter-spacing:.02em; margin-bottom:1px; }
.topbar .page-title { margin:0; font-size:19px; font-weight:700; }

.topbar-ai { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:11px;
    border:none; background:var(--navy); color:#fff; cursor:pointer; font-family:var(--font-sans); font-weight:600;
    font-size:13.5px; box-shadow:var(--shadow-1); transition:background var(--dur-fast) var(--ease-standard); }
.topbar-ai:hover { background:var(--navy-2); }
@media (max-width:760px){ .topbar-ai span { display:none; } .topbar-ai { padding:0 11px; } }

/* Linked KPI/stat cards lift on hover (app-wide, no markup change). */
.stat-card-link { transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.stat-card-link:hover { transform:var(--lift-translate); box-shadow:var(--lift-shadow); border-color:var(--c-primary); }