/* ============================================================
   FOUNDATION — design tokens
   ------------------------------------------------------------
   The shell is a fixed neutral system; ONE org-driven colour
   (--accent) drives every tinted surface, so a district whose
   accent is teal gets a coherent teal product rather than teal
   dropped into a purple chrome. Everything accent-derived is
   computed with color-mix() from --accent alone; js/app.js only
   ever sets --accent.

   Each derived token declares a literal fallback first, then the
   color-mix() version. Engines without color-mix() keep the
   literal; everything since 2023 takes the computed one.

   The default below is a NEUTRAL SLATE GREY, not purple. Purple is
   Niles North's colour, and it now arrives one way only: from that
   org's branding.accent, painted by applyOrgBranding() once the
   signed-in user is confirmed to be an assigned member of the org.
   Anything before that point — the login/signup/reset pages, the
   public parent/teacher/probe forms, the "not in an organization
   yet" holding screen, and the first paint of every page before
   the org row comes back — renders in this grey. A district that
   isn't Niles North never inherits Niles North's colour either.
   ============================================================ */

:root {
  /* ---- Org-driven accent (the ONLY value js/app.js writes) ---- */
  --accent: #5b6070;

  /* ---- Accent ramp, derived from --accent ---- */
  --accent-50:  #f4f5f6;
  --accent-50:  color-mix(in oklab, var(--accent)  7%, #fff);
  --accent-100: #eaebee;
  --accent-100: color-mix(in oklab, var(--accent) 14%, #fff);
  --accent-200: #d3d5db;
  --accent-200: color-mix(in oklab, var(--accent) 30%, #fff);
  --accent-400: #8b8f9c;
  --accent-400: color-mix(in oklab, var(--accent) 70%, #fff);
  --accent-500: #6b7080;
  --accent-500: color-mix(in oklab, var(--accent) 88%, #fff);
  --accent-600: var(--accent);
  --accent-700: #4a4e5b;
  --accent-700: color-mix(in oklab, var(--accent) 82%, #000);
  --accent-800: #3a3d47;
  --accent-800: color-mix(in oklab, var(--accent) 64%, #000);

  /* Accent used as a translucent wash / focus ring */
  --accent-ring:  rgba(91,96,112,0.16);
  --accent-ring:  color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-wash:  rgba(91,96,112,0.06);
  --accent-wash:  color-mix(in srgb, var(--accent) 7%, transparent);

  /* Softer ring for input focus, and the three accent-tinted drop shadows.
     These exist so nothing has to hand-write an rgba() of the accent — a
     hardcoded rgba(76,44,123,…) is exactly how D219 purple used to survive
     on pages belonging to other orgs. */
  --accent-ring-soft:    rgba(91,96,112,0.12);
  --accent-ring-soft:    color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-shadow:       rgba(91,96,112,0.18);
  --accent-shadow:       color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-shadow-md:    rgba(91,96,112,0.35);
  --accent-shadow-md:    color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-shadow-lg:    rgba(91,96,112,0.45);
  --accent-shadow-lg:    color-mix(in srgb, var(--accent) 45%, transparent);

  /* ---- Neutral scale (cool slate — the fixed shell) ---- */
  --n-0:   #ffffff;
  --n-25:  #fcfcfd;
  --n-50:  #f7f8fa;
  --n-100: #f1f3f7;
  --n-200: #e4e7ec;
  --n-300: #d3d8e0;
  --n-400: #98a2b3;
  --n-500: #667085;
  --n-600: #4b5565;
  --n-700: #344054;
  --n-800: #1d2939;
  --n-900: #101828;

  /* ---- Semantic surfaces ---- */
  --bg: var(--n-50);
  --bg-card: var(--n-0);
  --surface: var(--n-0);
  --surface-2: var(--n-25);
  --bg-subtle: var(--n-100);

  /* ---- Borders ---- */
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --border-input: var(--n-300);

  /* ---- Text ---- */
  --text: var(--n-900);
  --text-muted: var(--n-500);
  --text-faint: var(--n-400);
  --text-2: var(--n-600);

  /* ---- Status, each as fill / edge / ink ---- */
  --success: #067647;
  --success-bg: #ecfdf3;
  --success-border: #abefc6;
  --success-ink: #085d3a;

  --warning: #b54708;
  --warning-bg: #fffaeb;
  --warning-border: #fedf89;
  --warning-ink: #93370d;

  --critical: #d92d20;
  --critical-bg: #fef3f2;
  --critical-border: #fecdca;
  --critical-ink: #b42318;

  --info-bg: var(--accent-50);
  --info-border: var(--accent-200);
  --info-ink: var(--accent-700);

  /* ---- Elevation — layered, so depth reads at every level ---- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,0.08), 0 2px 4px -2px rgba(16,24,40,0.04);
  --shadow-lg: 0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16,24,40,0.10), 0 8px 8px -4px rgba(16,24,40,0.03);

  /* ---- Radii — tighter than the old 8/12/16/20 ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 999px;

  /* ---- Type scale ---- */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base: 14px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  /* ---- Spacing ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --content-max: 1240px;

  /* ---- Transitions ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 130ms;
  --t-base: 220ms;

  /* ---- Legacy aliases ------------------------------------
     ~4,400 lines of feature CSS reference these names. Pointing
     them at the ramp restyles all of it at once and keeps the
     old rules valid, so nothing needs a line-by-line rewrite.
     The "purple" in the names is historical only — they resolve
     to whatever --accent is, which is grey unless the org says
     otherwise. Don't read them as a colour promise. */
  --purple-primary: var(--accent-600);
  --purple-deep:    var(--accent-700);
  --purple-warm:    var(--accent-400);
  --purple-tint:    var(--accent-50);
}

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

body {
  font-family: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Lining, equal-width figures. Every date, count, day-remaining and
     percentage in this app sits in a column or changes in place;
     proportional digits make those jitter. */
  font-variant-numeric: tabular-nums;
}

/* Headings get progressively tighter tracking as they grow — optical
   compensation, so the large type doesn't read loose next to the body. */
h1, h2, h3, h4 {
  font-weight: 640;
  color: var(--text);
  line-height: 1.25;
}

h1 { font-size: var(--fs-3xl); letter-spacing: -0.028em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.022em; }
h3 { font-size: var(--fs-lg);  letter-spacing: -0.014em; }
h4 { font-size: var(--fs-md);  letter-spacing: -0.008em; }

/* Prose measure — long-form copy should never run the full card width. */
p { max-width: 72ch; }

.app-header {
  height: 60px;
  background: linear-gradient(to right, var(--purple-primary), var(--purple-deep));
  display: flex;
  align-items: center;
  padding: 0 24px;
  color: #fff;
  flex-shrink: 0;
}

.app-logo {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.content-area {
  flex: 1;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
}

.placeholder-message {
  font-size: 1.125rem;
  color: var(--text-muted);
}

.app-footer {
  text-align: center;
  padding: 16px 24px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* ============================================================
   Phase 1.3 — Auth styles
   ============================================================ */

.ace-header {
  height: 60px;
  background: linear-gradient(to right, var(--purple-primary), var(--purple-deep));
  color: #fff;
  flex-shrink: 0;
}

.ace-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 100%;
}

.ace-logo {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
}

.ace-footer {
  text-align: center;
  padding: 16px 24px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.ace-main {
  flex: 1;
  padding: 32px 24px;
}

.header-btn {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.header-btn:hover {
  background: rgba(255,255,255,0.25);
}

.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px - 40px);
  padding: 32px 16px;
}

.auth-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 32px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  border: none;
}

.auth-card h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 22px;
  letter-spacing: -0.015em;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.auth-card input,
.auth-card select {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: inherit;
  background: white;
  transition: all var(--t-fast) var(--ease);
}

.auth-card input:focus,
.auth-card select:focus {
  outline: none;
  border-color: var(--purple-primary);
  box-shadow: 0 0 0 4px var(--accent-ring-soft);
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent-500) 0%, var(--accent-600) 100%);
  color: white;
  border: none;
  padding: 11px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--accent-400) 0%, var(--accent-500) 100%);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0.5px);
}

.btn-primary:disabled {
  background: #d4d4d4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease);
}

.btn-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.error-msg {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--critical);
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

.success-msg {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: var(--success);
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

.auth-links {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.auth-links a {
  color: var(--purple-primary);
  text-decoration: none;
  margin: 0 4px;
}

.auth-links a:hover {
  text-decoration: underline;
}

.muted {
  color: var(--text-muted);
  font-size: 13px;
}

.ace-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 700px;
  margin: 32px auto;
  box-shadow: var(--shadow-md);
  border: none;
}

/* ============================================================
   Phase 1.4 — App layout + Sidebar
   ============================================================ */

.ace-app-main {
  margin-left: 270px;
  min-height: 100vh;
  padding: 0;
  transition: margin-left var(--t-base) var(--ease);
}

.page-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 28px;
}

.ace-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 270px;
  height: 100vh;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  transition: transform var(--t-base) var(--ease);
  box-shadow: var(--shadow-sm);
}

.sidebar-brand {
  background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-deep) 100%);
  color: white;
  padding: 20px 18px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: white;
  padding: 5px;
  flex-shrink: 0;
  object-fit: contain;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.brand-text {
  flex: 1;
  min-width: 0;
}

.brand-text .brand-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: white;
}

.brand-text .brand-school {
  font-size: 12.5px;
  opacity: 0.9;
  color: white;
  margin-top: 3px;
}

.brand-text .brand-user {
  font-size: 11px;
  opacity: 0.75;
  color: white;
  margin-top: 1px;
}

.sidebar-nav {
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--t-fast) var(--ease);
}

.nav-item:hover {
  background: var(--bg-subtle);
}

.nav-item.active {
  background: var(--purple-tint);
  color: var(--purple-primary);
  font-weight: 600;
}

.nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.sidebar-section-title {
  padding: 16px 18px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.sidebar-students {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
  min-height: 80px;
}

.sidebar-student {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  transition: background var(--t-fast) var(--ease);
}

.sidebar-student:hover {
  background: var(--bg-subtle);
}

.student-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-grade {
  font-size: 11px;
  color: var(--text-muted);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-green  { background: var(--success); }
.dot-yellow,
.dot-amber  { background: var(--warning); }
.dot-red    { background: var(--critical); }
.dot-gray   { background: #cbd5e1; }

.sidebar-empty {
  padding: 14px 18px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}

.sidebar-add-btn {
  margin: 10px 14px;
  background: linear-gradient(180deg, var(--accent-500) 0%, var(--accent-600) 100%);
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease);
  box-shadow: var(--shadow-sm);
}

.sidebar-add-btn:hover {
  background: linear-gradient(180deg, var(--accent-400) 0%, var(--accent-500) 100%);
  box-shadow: var(--shadow-md);
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-logout {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 9px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  transition: all var(--t-fast) var(--ease);
}

.sidebar-logout:hover {
  background: #fef2f2;
  color: var(--critical);
}

/* Mobile toggle button */
.sidebar-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 101;
  background: white;
  border: 1px solid var(--border);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  display: none;
  box-shadow: var(--shadow-sm);
}

/* Override the old footer position */
.ace-footer {
  margin-left: 270px;
  padding: 20px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  border-top: none;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .ace-sidebar {
    transform: translateX(-100%);
    box-shadow: 2px 0 16px rgba(0,0,0,0.1);
  }

  .ace-sidebar.open {
    transform: translateX(0);
  }

  .ace-app-main {
    margin-left: 0;
    padding-top: 60px;
  }

  .ace-footer {
    margin-left: 0;
  }

  .sidebar-toggle {
    display: block;
  }
}

/* ============================================================
   Phase 1.5 — Homepage + Calendar
   ============================================================ */

.homepage {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 0 40px;
}

.home-header {
  margin-bottom: 22px;
}

.home-header h1 {
  font-size: 28px;
  margin: 0 0 6px;
  color: var(--text);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.home-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 0 0 14px;
}

/* Collapsible month calendar on Home (Part 3.17 — actionable content first). */
.home-calendar-summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none; user-select: none;
  padding: 4px 0; margin-bottom: 14px;
}
.home-calendar-summary::-webkit-details-marker { display: none; }
.home-calendar-hint { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Calendar widget */
.calendar-widget {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
  border: none;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.calendar-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  text-align: center;
  letter-spacing: -0.01em;
}

.calendar-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cal-nav-btn,
.cal-today-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  transition: all var(--t-fast) var(--ease);
}

.cal-nav-btn { width: 34px; padding: 7px 0; }
.cal-today-btn { font-size: 12.5px; font-weight: 600; }

.cal-nav-btn:hover,
.cal-today-btn:hover {
  background: var(--purple-tint);
  border-color: var(--purple-primary);
  color: var(--purple-primary);
}

.calendar-view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cal-view-btn {
  background: var(--bg-card);
  border: none;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-muted);
  transition: all var(--t-fast) var(--ease);
}

.cal-view-btn.active {
  background: var(--purple-primary);
  color: white;
}

/* Month grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 0;
  letter-spacing: 0.06em;
}

.cal-cell {
  min-height: 68px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all var(--t-fast) var(--ease);
}

.cal-cell:hover {
  background: var(--purple-tint);
  border-color: var(--purple-warm);
}

.cal-blank {
  background: transparent;
  border: 1px dashed transparent;
  cursor: default;
}

.cal-blank:hover {
  background: transparent;
  border-color: transparent;
}

.cal-daynum {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.cal-today {
  background: var(--purple-tint);
  border-color: var(--purple-primary);
}

.cal-today .cal-daynum {
  color: var(--purple-primary);
  font-weight: 700;
}

.cal-approaching {
  background: #fff7ed;
  border-color: var(--warning);
}

.cal-critical,
.cal-overdue {
  background: #fef2f2;
  border-color: var(--critical);
}

.cal-events {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.cal-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.dot-annual  { background: var(--purple-primary); }
.dot-reeval  { background: #ea580c; }
.dot-meeting { background: var(--purple-warm); }

.cal-overflow {
  font-size: 10px;
  color: var(--text-muted);
}

/* Week view */
.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-week-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  transition: all var(--t-fast) var(--ease);
}

.cal-week-cell.cal-today {
  background: var(--purple-tint);
  border-color: var(--purple-primary);
}

.cal-week-cell.cal-approaching {
  background: #fff7ed;
  border-color: var(--warning);
}

.cal-week-cell.cal-critical {
  background: #fef2f2;
  border-color: var(--critical);
}

.cal-week-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6px;
}

.cal-week-dow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}

.cal-week-daynum {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}

.cal-week-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.cal-week-event {
  font-size: 11px;
  padding: 5px 7px;
  border-radius: 6px;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.event-annual  { background: var(--purple-primary); }
.event-reeval  { background: #ea580c; }
.event-meeting { background: var(--purple-warm); }

.cal-week-empty {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  padding: 10px 0;
  font-style: italic;
}

.calendar-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.legend-annual  { background: var(--purple-primary); }
.legend-reeval  { background: #ea580c; }
.legend-meeting { background: var(--purple-warm); }

/* Needs Attention grid */
.attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.attention-card {
  display: block;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  border: none;
  border-left: 4px solid transparent;
  transition: all var(--t-fast) var(--ease);
}

.attention-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.attention-approaching { border-left-color: var(--warning); }
.attention-critical,
.attention-overdue { border-left-color: var(--critical); }

.attention-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.attention-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Phase 3.8d — Academic Performance: teacher-feedback reference panel */
.iep-acad-tf-panel {
  background: var(--purple-tint);
  border: 1px solid #ddd5f0;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.iep-acad-tf-empty {
  font-size: 12.5px;
  margin: 0;
}

.iep-acad-tf-row {
  padding: 10px 0;
  border-bottom: 1px solid #ddd5f0;
}

.iep-acad-tf-row:first-child { padding-top: 0; }
.iep-acad-tf-row:last-child  { border-bottom: none; padding-bottom: 0; }

.iep-acad-tf-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.iep-acad-tf-course {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.iep-acad-tf-teacher {
  font-size: 11.5px;
  color: var(--text-muted);
}

.iep-acad-tf-setting {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e8dff8;
  color: var(--purple-primary);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.iep-acad-tf-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 16px;
}

@media (max-width: 600px) {
  .iep-acad-tf-fields { grid-template-columns: 1fr; }
}

.iep-acad-tf-pair { display: flex; flex-direction: column; gap: 1px; }

.iep-acad-tf-key {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.iep-acad-tf-val {
  font-size: 12px;
  color: var(--text);
}

/* Barriers the teacher feedback points at. Amber only while unselected — once
   the case manager picks it, it reads as a normal selected chip. */
.iep-chip-suggested > span {
  background: #fffbeb;
  border-color: #fde68a;
}
.iep-chip-suggested input:not(:checked) + span .iep-chip-tag {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
}

/* 3.15 — Strength suggestion chips (TA1) + parent reference note (PF1) */
.iep-strength-suggest { margin-top: 8px; }
.iep-strength-suggest-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  margin-bottom: 6px;
}
.iep-strength-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iep-strength-chip { display: inline-flex; align-items: stretch; }
.iep-strength-chip-add {
  font-size: 12.5px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 999px 0 0 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.iep-strength-chip-add:hover { background: #fef3c7; }
.iep-strength-chip-x {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  line-height: 1;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: none;
  border-radius: 0 999px 999px 0;
  padding: 0 8px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.iep-strength-chip-x:hover { background: #fde68a; }
.iep-strength-parent-note {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.iep-strength-parent-label { font-weight: 600; color: var(--text-muted); margin-right: 6px; }
.iep-strength-parent-text { color: var(--text); }

/* Phase 3.10a — PLAAFP narrative generate panel */
.iep-generate-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.iep-narrative-output {
  width: 100%;
  min-height: 360px;
  line-height: 1.6;
  font-size: 14px;
}

/* Phase 3.11a — five Embrace-aligned output sections + per-section copy */
.iep-output-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.iep-output-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.iep-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.iep-output-head .iep-label { margin: 0; }
.iep-output-copy {
  flex: 0 0 auto;
  padding: 4px 14px;
  font-size: 13px;
}
.iep-output-area {
  width: 100%;
  line-height: 1.6;
  font-size: 14px;
}
.iep-output-compliance {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2, #f8f9fb);
}
.iep-output-compliance-head {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}
.iep-output-compliance-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2, #444);
}

.attention-reasons {
  margin: 10px 0 8px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.attention-reasons li {
  padding: 4px 0;
}

.reason-approaching { color: #b45309; }
.reason-critical, .reason-overdue { color: var(--critical); font-weight: 600; }

.attention-action {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--purple-primary);
}

/* Empty states */
.empty-state {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: none;
}

.empty-state-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.empty-state-small {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  border: none;
}

/* Mobile responsive */
@media (max-width: 700px) {
  .cal-cell {
    min-height: 50px;
    padding: 4px;
  }

  .cal-daynum {
    font-size: 11px;
  }

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

  .calendar-header {
    justify-content: center;
  }

  .calendar-title {
    width: 100%;
    text-align: center;
    order: -1;
  }
}

/* ============================================================
   Phase 1.5.1 — Logo styling
   ============================================================ */

/* Auth header — small logo next to ACE MANAGER text */
.ace-header-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: white;
  padding: 3px;
  object-fit: contain;
  margin-right: 12px;
  vertical-align: middle;
}

.ace-header-inner h1.ace-logo {
  display: inline-flex;
  align-items: center;
}

/* Auth main — centered large logo above the card */
.auth-logo-wrap {
  display: flex;
  justify-content: center;
  margin: 28px auto 16px;
}

/* The full mark-plus-wordmark lockup, which is what the login/signup/reset
   pages show above the card. It sits directly on the page — no white tile and
   no accent shadow, because the artwork is already a finished lockup and the
   pre-auth pages are exactly where we do NOT want a district colour. */
.auth-page-lockup {
  width: 148px;
  height: auto;
  display: block;
}

.auth-page-logo {
  width: 76px;
  height: 76px;
  border-radius: 16px;
  background: white;
  padding: 7px;
  box-shadow: 0 8px 24px var(--accent-shadow);
  object-fit: contain;
}

/* ============================================================
   Phase 1.6 — Student Profile Dashboard
   ============================================================ */

.profile-header {
  margin-bottom: 28px;
}

.back-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  display: inline-block;
  margin-bottom: 14px;
  transition: color var(--t-fast) var(--ease);
}

.back-link:hover {
  color: var(--purple-primary);
}

.profile-identity {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-md);
  border: none;
}

.profile-name {
  font-size: 28px;
  margin: 0;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.profile-meta {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 5px;
}

.profile-meta .dot-sep {
  margin: 0 8px;
  opacity: 0.4;
}

.profile-deadline {
  margin-top: 12px;
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}

.profile-deadline.urgency-clear,
.profile-deadline.urgency-comfortable {
  background: #ecfdf5;
  color: #065f46;
}

/* soon (0–30 days) — amber */
.profile-deadline.urgency-soon {
  background: #fff7ed;
  color: #b45309;
}

/* approaching (31–60 days) — muted/purple, NOT amber */
.profile-deadline.urgency-approaching {
  background: var(--purple-tint);
  color: var(--purple-primary);
}

.profile-deadline.urgency-critical,
.profile-deadline.urgency-overdue {
  background: #fef2f2;
  color: var(--critical);
}

.profile-deadline.urgency-none.muted {
  background: transparent;
  color: var(--text-muted);
  font-weight: 400;
  padding: 0;
  font-size: 12px;
}

/* Profile card grid */
.profile-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .profile-card-grid {
    grid-template-columns: 1fr;
  }
}

.profile-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  border: none;
  transition: all var(--t-fast) var(--ease);
}

.profile-card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.card-icon {
  font-size: 22px;
}

.card-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.card-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.card-status-dot.dot-gray   { background: #cbd5e1; }
.card-status-dot.dot-green  { background: var(--success); }
.card-status-dot.dot-amber,
.card-status-dot.dot-yellow { background: var(--warning); }
.card-status-dot.dot-red    { background: var(--critical); }

.card-status-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  min-height: 18px;
}

.card-action {
  background: linear-gradient(180deg, var(--accent-500) 0%, var(--accent-600) 100%);
  color: white;
  border: none;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: all var(--t-fast) var(--ease);
  box-shadow: var(--shadow-sm);
}

.card-action:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--accent-400) 0%, var(--accent-500) 100%);
  box-shadow: var(--shadow-md);
}

.card-action:disabled {
  background: #d4d4d4;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.8;
}

.card-coming-soon {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}

/* Notes floating action button */
.notes-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-500) 0%, var(--accent-600) 100%);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 6px 20px var(--accent-shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-base) var(--ease);
}

.notes-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-shadow-lg);
}

/* Notes drawer */
.notes-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-card);
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  z-index: 250;
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(0,0,0,0.12);
}

.notes-drawer.open {
  transform: translateX(0);
}

.notes-drawer-header {
  background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-deep) 100%);
  color: white;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-left-radius: 18px;
}

.notes-drawer-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.notes-close {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.notes-close:hover {
  background: rgba(255,255,255,0.25);
}

.notes-drawer-body {
  flex: 1;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notes-textarea {
  flex: 1;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  resize: none;
  background: white;
  transition: all var(--t-fast) var(--ease);
}

.notes-textarea:focus {
  outline: none;
  border-color: var(--purple-primary);
  box-shadow: 0 0 0 4px var(--accent-ring-soft);
}

.notes-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 240;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}

.notes-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   Phase 1.7 — Add Student form
   ============================================================ */

.add-student-header {
  margin-bottom: 24px;
}

.add-student-header h1 {
  font-size: 28px;
  margin: 6px 0 6px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.student-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.student-form fieldset {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-lg);
  padding: 20px 24px 24px;
  margin: 0;
  box-shadow: var(--shadow-sm);
}

.student-form legend {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple-primary);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.form-row + .form-row {
  margin-top: 16px;
}

.form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 700px) {
  .form-row.two-col {
    grid-template-columns: 1fr;
  }
}

.student-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--text);
}

.label-text {
  font-weight: 600;
  font-size: 13px;
}

.required {
  color: var(--critical);
  font-weight: 700;
}

.optional {
  color: var(--text-faint);
  font-weight: 400;
  font-size: 12px;
  font-style: italic;
}

.field-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

.student-form input[type="text"],
.student-form input[type="number"],
.student-form input[type="date"],
.student-form select,
.student-form textarea {
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-family: inherit;
  background: white;
  transition: all var(--t-fast) var(--ease);
}

.student-form input:focus,
.student-form select:focus,
.student-form textarea:focus {
  outline: none;
  border-color: var(--purple-primary);
  box-shadow: 0 0 0 4px var(--accent-ring-soft);
}

.student-form textarea {
  resize: vertical;
  min-height: 76px;
}

.checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  cursor: pointer;
  padding: 10px 0;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--purple-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-label .label-text {
  font-weight: 500;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.form-actions .btn-primary {
  padding: 11px 22px;
}

/* ============================================================
   Phase 2.0a — Modal, Drawer, Toast, Status Pills
   ============================================================ */

/* ----- Right-slide Drawer ----- */
.ace-drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.ace-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.ace-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 460px;
  max-width: 95vw;
  height: 100vh;
  background: white;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.ace-drawer-wrap.open .ace-drawer-backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.ace-drawer-wrap.open .ace-drawer {
  transform: translateX(0);
}

.ace-drawer-header {
  background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-deep) 100%);
  color: white;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-left-radius: 18px;
}

.ace-drawer-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ace-drawer-close {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.ace-drawer-close:hover {
  background: rgba(255,255,255,0.25);
}

.ace-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}

.ace-drawer-footer {
  border-top: 1px solid var(--border);
  padding: 14px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ----- Centered Modal ----- */
.ace-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}

.ace-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.ace-modal {
  position: relative;
  background: white;
  border-radius: 18px;
  padding: 28px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.ace-modal-wrap.open .ace-modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.ace-modal-wrap.open .ace-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.ace-modal h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ace-modal-message {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

.ace-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ----- Shared button styles for modal/drawer ----- */
.ace-btn-primary, .ace-btn-secondary, .ace-btn-danger {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ace-btn-primary {
  background: var(--purple-primary);
  color: white;
}

.ace-btn-primary:hover:not(:disabled) {
  background: #3a2160;
}

.ace-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ace-btn-secondary {
  background: white;
  color: var(--text);
  border-color: var(--border);
}

.ace-btn-secondary:hover {
  background: #f5f5f5;
}

.ace-btn-danger {
  background: #dc2626;
  color: white;
}

.ace-btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

/* ----- Toast Notifications ----- */
.ace-toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}

.ace-toast {
  background: white;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-width: 380px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  font-size: 14px;
  border: 1px solid var(--border);
}

.ace-toast.open {
  transform: translateY(0);
  opacity: 1;
}

.ace-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  color: white;
  flex-shrink: 0;
}

.ace-toast-success .ace-toast-icon { background: var(--success); }
.ace-toast-error   .ace-toast-icon { background: #dc2626; }
.ace-toast-info    .ace-toast-icon { background: var(--purple-primary); }

.ace-toast-msg {
  color: var(--text);
}

/* ----- Status Pills (used in Phase 2.6+) ----- */
.ace-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ace-pill-success {
  background: #d1fae5;
  color: #065f46;
}

.ace-pill-warning {
  background: #fff7ed;
  color: #c2410c;
}

.ace-pill-critical {
  background: #fee2e2;
  color: #991b1b;
}

.ace-pill-neutral {
  background: #f4f4f5;
  color: #525252;
}

.ace-pill-purple {
  background: var(--purple-tint);
  color: var(--purple-primary);
}

/* ============================================================
   Phase 2.0c — Icon system
   ============================================================ */

.ace-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.nav-item .ace-icon,
.sidebar-add-btn .ace-icon,
.sidebar-logout .ace-icon {
  margin-right: 2px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--purple-tint);
  color: var(--purple-primary);
  font-size: 0;
}

.card-icon .ace-icon {
  width: 18px;
  height: 18px;
}

.ace-toast-icon .ace-icon {
  stroke-width: 3;
}

/* ============================================================
   Phase 2.7 — Notes auto-save indicator
   ============================================================ */

.notes-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notes-status-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notes-status {
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  min-width: 60px;
  text-align: right;
  transition: opacity var(--t-fast) var(--ease);
}

.notes-status:empty {
  opacity: 0;
}

.notes-status-saving {
  color: rgba(255,255,255,0.7);
}

.notes-status-saved {
  color: #a7f3d0;
}

.notes-status-error {
  color: #fca5a5;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   Phase 2.1 — Caseload Grid Page
   ============================================================ */

.caseload-page {
  max-width: 1100px;
  margin: 0 auto;
}

.caseload-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.caseload-header h1 {
  font-size: 28px;
  margin: 0 0 4px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.caseload-header .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  white-space: nowrap;
}

.caseload-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.caseload-filter {
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  width: fit-content;
}

/* Cards / List view toggle (Part 4) */
.caseload-viewtoggle {
  display: flex;
  gap: 2px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.caseload-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.caseload-view-btn:hover:not(.active) { background: var(--bg-subtle); color: var(--text); }
.caseload-view-btn.active { background: var(--purple-tint); color: var(--purple-primary); }

.caseload-tab {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--t-fast) var(--ease);
}

.caseload-tab:hover:not(.active) {
  background: var(--bg-subtle);
  color: var(--text);
}

.caseload-tab.active {
  background: var(--purple-tint);
  color: var(--purple-primary);
}

.caseload-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-subtle);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.caseload-tab.active .caseload-tab-count {
  background: var(--purple-primary);
  color: white;
}

.caseload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Dense list view (Part 4): one compact row per student. */
.caseload-grid.caseload-grid-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.caseload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.caseload-row:last-child { border-bottom: none; }
.caseload-row:hover { background: var(--bg-subtle); }
.caseload-row .status-dot { flex: 0 0 auto; }
.caseload-row-name {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.caseload-row-grade {
  flex: 0 0 auto; width: 64px;
  font-size: 13px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.caseload-row-disability {
  flex: 0 0 auto; width: 130px;
  font-size: 12.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.caseload-row-status { flex: 0 0 auto; margin-left: auto; }
.caseload-row-bip {
  font-size: 10px; font-weight: 700; color: var(--purple-primary);
  background: var(--purple-tint); padding: 1px 5px; border-radius: 4px;
}
.caseload-row.archived .caseload-row-name { color: var(--text-muted); font-weight: 500; }
@media (max-width: 640px) {
  .caseload-row-disability { display: none; }
  .caseload-row-grade { width: 44px; }
}

.caseload-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
}

.caseload-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.caseload-card.archived {
  opacity: 0.7;
}

.caseload-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.caseload-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.caseload-card-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  flex-wrap: wrap;
}

/* Grade and disability are independent flex items: they sit inline with a gap
   when they fit and wrap onto separate lines when they don't — no literal "·"
   separator to dangle (3.17.1). */
.caseload-card-grade { white-space: nowrap; }
.caseload-card-disability { min-width: 0; }

.caseload-card-pill {
  margin-top: 4px;
}

.caseload-card-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--purple-primary);
  background: var(--purple-tint);
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-block;
  width: fit-content;
}

.caseload-card-footer {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.caseload-card-open {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--purple-primary);
}

/* ============================================================
   Phase 2.5 — Calendar popover for multi-event days
   ============================================================ */

.cal-popover {
  position: absolute;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  padding: 8px;
  min-width: 240px;
  max-width: 320px;
  z-index: 300;
  border: 1px solid var(--border);
}

.cal-popover-header {
  padding: 6px 10px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.cal-popover-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  transition: background var(--t-fast) var(--ease);
}

.cal-popover-item:hover {
  background: var(--bg-subtle);
}

.cal-popover-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-popover-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Phase 2.2 — Edit / Archive controls on profile
   ============================================================ */

.profile-identity-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-identity-main {
  flex: 1;
  min-width: 0;
}

.profile-identity-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.profile-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
}

.profile-menu-wrap {
  position: relative;
}

.profile-menu-btn {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--t-fast) var(--ease);
}

.profile-menu-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.profile-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 50;
  min-width: 200px;
  border: 1px solid var(--border);
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: inherit;
  color: var(--text);
  transition: all var(--t-fast) var(--ease);
}

.profile-menu-item:hover {
  background: var(--bg-subtle);
}

.profile-menu-danger:hover {
  background: #fef2f2;
  color: var(--critical);
}

/* ============================================================
   Phase 2.3 — Meetings + prep checklist
   ============================================================ */

.profile-card-meetings {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .profile-card-meetings {
    grid-column: span 1;
  }
}

.meeting-empty {
  text-align: center;
  padding: 12px 0;
}

.meeting-empty p {
  margin: 0 0 14px;
}

.meeting-empty .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.meeting-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}

.meeting-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.meeting-type-pill {
  display: inline-block;
  background: var(--purple-tint);
  color: var(--purple-primary);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.meeting-date-line {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.meeting-mark-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.meeting-mark-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.meeting-attendees,
.meeting-notes-display {
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
}

.meeting-attendees strong {
  color: var(--text);
}

.prep-checklist {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.prep-checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.prep-checklist-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.prep-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.prep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prep-item {
  padding: 0;
}

.prep-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--t-fast) var(--ease);
}

.prep-item label:hover {
  background: var(--bg-subtle);
}

.prep-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--purple-primary);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.prep-label {
  flex: 1;
  color: var(--text);
}

.prep-item.completed .prep-label {
  text-decoration: line-through;
  color: var(--text-muted);
}

.prep-auto-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--purple-tint);
  color: var(--purple-primary);
  padding: 2px 7px;
  border-radius: 999px;
}

.meeting-preview {
  background: var(--bg-subtle);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

.meeting-preview strong {
  color: var(--text);
}

.meeting-preview ul {
  font-size: 12.5px;
}

/* ============================================================
   Phase 2.3.1 — Border Polish
   Stronger, more pronounced borders on inputs and cards
   ============================================================ */

/* All fillable form elements get a thicker, darker border */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  border: 1.5px solid var(--border-input) !important;
  background: white !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
}

/* Hover on inputs darkens border slightly */
input[type="text"]:hover:not(:focus),
input[type="email"]:hover:not(:focus),
input[type="password"]:hover:not(:focus),
input[type="number"]:hover:not(:focus),
input[type="date"]:hover:not(:focus),
input[type="time"]:hover:not(:focus),
input[type="search"]:hover:not(:focus),
input[type="tel"]:hover:not(:focus),
input[type="url"]:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
  border-color: #8a8a8a !important;
}

/* Focus state remains purple ring + purple border */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  border-color: var(--purple-primary) !important;
  box-shadow: 0 0 0 4px var(--accent-ring-soft) !important;
  outline: none !important;
}

/* Cards: keep shadows but add a real border */
.ace-card,
.profile-identity,
.profile-card,
.attention-card,
.caseload-card,
.empty-state,
.empty-state-small,
.calendar-widget,
.auth-card,
.student-form fieldset {
  border: 1px solid var(--border) !important;
}

/* Calendar cells get a stronger border for grid definition */
.cal-cell:not(.cal-blank),
.cal-week-cell {
  border: 1px solid var(--border) !important;
}

/* Caseload filter pill container */
.caseload-filter {
  border: 1px solid var(--border) !important;
}

/* Modal + drawer panels — clear edge */
.ace-drawer,
.ace-modal,
.notes-drawer,
.profile-menu,
.cal-popover {
  border: 1px solid var(--border) !important;
}

/* Sidebar boundary slightly stronger */
.ace-sidebar {
  border-right: 1px solid var(--border) !important;
}

/* Toasts get a defined edge so they sit cleanly */
.ace-toast {
  border: 1px solid var(--border) !important;
}

/* Profile menu button + caseload tab inactive state visibility */
.profile-menu-btn {
  border: 1px solid var(--border-input) !important;
}

.profile-menu-btn:hover {
  border-color: #8a8a8a !important;
}

/* Calendar nav buttons + view toggle border definition */
.cal-nav-btn,
.cal-today-btn,
.calendar-view-toggle {
  border: 1px solid var(--border-input) !important;
}

.cal-view-btn.active {
  border-color: var(--purple-primary) !important;
}

/* Secondary buttons (cancel, edit) get a clearer outline */
.btn-secondary,
.ace-btn-secondary {
  border: 1.5px solid var(--border-input) !important;
}

.btn-secondary:hover,
.ace-btn-secondary:hover {
  border-color: #8a8a8a !important;
}

/* Override the "border: none" rule from Phase 2.0b on auth card */
.auth-card {
  border: 1px solid var(--border) !important;
}

/* Override "border: none" on student form fieldsets from Phase 2.0b */
.student-form fieldset {
  border: 1px solid var(--border) !important;
}

/* Override "border: none" on profile cards */
.profile-card {
  border: 1px solid var(--border) !important;
}

/* Override "border: none" on caseload cards */
.caseload-card {
  border: 1px solid var(--border) !important;
}

/* Override "border: none" on attention cards (but preserve left-border accent) */
.attention-card {
  border: 1px solid var(--border) !important;
  border-left: 4px solid transparent !important;
}

.attention-approaching {
  border-left-color: var(--warning) !important;
}

.attention-critical,
.attention-overdue {
  border-left-color: var(--critical) !important;
}

/* Override "border: none" on empty states */
.empty-state,
.empty-state-small {
  border: 1px solid var(--border) !important;
}

/* Override "border: none" on calendar widget */
.calendar-widget {
  border: 1px solid var(--border) !important;
}

/* Make checkbox container outlines visible on hover */
.checkbox-label:hover,
.prep-item label:hover {
  outline: 1px solid var(--border) !important;
  outline-offset: -1px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Phase 2.4 — Mark Complete + Follow-up checklist
   ============================================================ */

.meeting-overdue-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #c2410c;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}

.meeting-completed-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}

.meeting-mark-btn-prominent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 10px 16px;
}

.followup-checklist {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.followup-done-cta {
  margin-top: 16px;
  padding: 16px 18px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.followup-done-cta p {
  margin: 0;
  color: #065f46;
  font-size: 14px;
  font-weight: 500;
}

.followup-done-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   Phase 2.4.1 — Calendar event chips (month view)
   ============================================================ */

/* Bump cell height to fit chips comfortably */
.cal-cell {
  min-height: 84px !important;
  padding: 6px 6px 5px !important;
}

@media (max-width: 700px) {
  .cal-cell {
    min-height: 64px !important;
    padding: 4px !important;
  }
}

/* Vertical stack of event chips below the day number */
.cal-events-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  min-width: 0;
}

.cal-event-chip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

/* Color the chips by type — same colors as week view */
.cal-event-chip.chip-annual  { background: var(--purple-primary); }
.cal-event-chip.chip-reeval  { background: #ea580c; }
.cal-event-chip.chip-meeting { background: var(--purple-warm); }

/* Overflow indicator */
.cal-overflow {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 1px 4px;
}

/* On very narrow screens, drop chip text and fall back to compact dots */
@media (max-width: 540px) {
  .cal-event-chip {
    font-size: 0;
    padding: 0;
    height: 5px;
    border-radius: 3px;
    line-height: 0;
  }
  .cal-overflow {
    font-size: 9px;
  }
}

/* ============================================================
   Phase 2.6 — Needs Attention enhancements + Recent Meetings
   ============================================================ */

/* New text rows for richer attention card content */
.attention-headline {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-top: 8px;
  text-wrap: pretty;
}

.attention-subline {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
  text-wrap: pretty;
}

/* Override the older .attention-reasons block — Phase 2.6 doesn't use it */
.attention-card .attention-reasons {
  display: none;
}

/* State-kind specific accents (left border color) */
.attention-meeting-upcoming {
  border-left-color: var(--purple-primary) !important;
}

.attention-meeting-passed {
  border-left-color: var(--critical) !important;
}

.attention-followups-pending {
  border-left-color: var(--warning) !important;
}

/* ----- Recent Meetings zone ----- */
.recent-meetings-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recent-meeting {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--t-fast) var(--ease);
}

.recent-meeting:hover {
  box-shadow: var(--shadow-md);
}

.recent-meeting.all-done {
  opacity: 0.7;
}

.recent-meeting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
}

.recent-meeting-info {
  min-width: 0;
  flex: 1;
}

.recent-meeting-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.recent-meeting-name:hover {
  color: var(--purple-primary);
}

.recent-meeting-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.recent-meeting-type {
  font-weight: 600;
  color: var(--purple-primary);
}

.recent-meeting-meta .dot-sep {
  opacity: 0.4;
}

.recent-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all var(--t-fast) var(--ease);
}

.recent-toggle:hover {
  background: var(--purple-tint);
  color: var(--purple-primary);
  border-color: var(--purple-primary);
}

.recent-chevron {
  display: inline-flex;
  transition: transform var(--t-fast) var(--ease);
}

.recent-meeting.expanded .recent-chevron {
  transform: rotate(90deg);
}

.recent-meeting.all-done .recent-followup-count {
  color: var(--success);
}

.recent-followup-list {
  list-style: none;
  margin: 0;
  padding: 0 18px 14px;
  display: none;
  flex-direction: column;
  gap: 2px;
}

.recent-meeting.expanded .recent-followup-list {
  display: flex;
}

.recent-followup-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--t-fast) var(--ease);
}

.recent-followup-item label:hover {
  background: var(--bg-subtle);
}

.recent-followup-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--purple-primary);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.recent-followup-item.completed span {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* ============================================================
   Phase 2.8 — Empty states + Settings page
   ============================================================ */

/* Welcome screen for 0-students homepage */
.welcome-screen {
  max-width: 640px;
  margin: 24px auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.welcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  background: var(--purple-tint);
  color: var(--purple-primary);
  margin-bottom: 20px;
}

.welcome-screen h1 {
  font-size: 26px;
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.welcome-lead {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 auto 8px;
  max-width: 480px;
  line-height: 1.55;
}

.welcome-step {
  font-size: 14px;
  margin: 14px 0 18px;
}

.welcome-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 15px;
  margin-bottom: 32px;
}

.welcome-features {
  list-style: none;
  margin: 0 auto;
  padding: 24px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  max-width: 460px;
  font-size: 14px;
  color: var(--text-muted);
}

.welcome-features li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome-features li strong {
  color: var(--text);
  margin-right: 4px;
}

/* Caseload empty state */
.caseload-empty {
  grid-column: 1 / -1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.caseload-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-lg);
  background: var(--purple-tint);
  color: var(--purple-primary);
  margin-bottom: 16px;
}

.caseload-empty h3 {
  font-size: 19px;
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.caseload-empty p {
  font-size: 14px;
  max-width: 420px;
  margin: 0 auto 20px;
  line-height: 1.55;
}

.caseload-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
}

/* Settings page */
.settings-page {
  max-width: 720px;
  margin: 0 auto;
}

.settings-header {
  margin-bottom: 28px;
}

.settings-header h1 {
  font-size: 28px;
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.settings-section {
  margin-bottom: 28px;
}

.settings-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: 0 0 12px;
}

.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px 4px;
  box-shadow: var(--shadow-sm);
}

.settings-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.settings-value {
  font-size: 14.5px;
  color: var(--text);
}

.settings-note {
  font-size: 12.5px;
  margin: 10px 4px 0;
}

.settings-card-disabled {
  opacity: 0.75;
}

.settings-coming-soon {
  list-style: none;
  margin: 0;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-coming-soon li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  font-size: 14px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}

.archived-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}

.archived-info {
  min-width: 0;
}

.archived-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.archived-meta {
  font-size: 12.5px;
  margin-top: 2px;
}

.archived-restore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
}

.settings-empty {
  text-align: center;
  padding: 24px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.settings-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-muted);
  margin-bottom: 8px;
}

.settings-signout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   Phase 2.8.1 — Status dot purple variant
   ============================================================ */

.status-dot.dot-purple,
.card-status-dot.dot-purple {
  background: var(--purple-warm);
}

/* ============================================================
   Phase 3.2 — Course selector
   ============================================================ */

.course-selector { display: flex; flex-direction: column; gap: 12px; }

.course-search-wrap { position: relative; }

.course-search-input {
  width: 100%;
}

.course-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
  z-index: 200;
  padding: 6px;
}

.course-dropdown-group {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 8px 10px 4px;
}

.course-dropdown-item {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  transition: background var(--t-fast) var(--ease);
}

.course-dropdown-item:hover { background: var(--purple-tint); }

.course-opt-code {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.course-dropdown-empty {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.course-empty-hint { font-size: 13px; }

.course-selected-list { display: flex; flex-direction: column; gap: 10px; }

.course-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.course-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.course-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.course-card-code {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.course-pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
}

.course-pill-academic { background: var(--purple-tint); color: var(--purple-primary); }
.course-pill-nonacademic { background: #f1f1f1; color: #777; }

.course-card-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-faint);
  padding: 2px;
  display: inline-flex;
  border-radius: var(--radius-sm);
  transition: all var(--t-fast) var(--ease);
  flex-shrink: 0;
}

.course-card-remove:hover { color: var(--critical); background: #fef2f2; }

.course-card-fields {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 10px;
}

@media (max-width: 600px) {
  .course-card-fields { grid-template-columns: 1fr; }
}

.course-card-field { display: flex; flex-direction: column; gap: 4px; }

.course-card-field > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.course-card-field input,
.course-card-field select { font-size: 13px; padding: 7px 9px; }

/* ============================================================
   Phase 3.3b — Teacher Feedback card (case-manager view)
   ============================================================ */

.profile-card-teacher-feedback { grid-column: span 2; }
@media (max-width: 900px) { .profile-card-teacher-feedback { grid-column: span 1; } }

.tf-section { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }

.tf-generate p, .tf-empty p { margin: 0 0 14px; font-size: 13.5px; }
.tf-generate .btn-primary, .tf-empty .btn-secondary { display: inline-flex; align-items: center; gap: 6px; }

.tf-link-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.tf-link-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 10px;
}

.tf-link-row { display: flex; gap: 8px; align-items: center; }
.tf-link-input { flex: 1; font-size: 13px; font-family: ui-monospace, monospace; }
.tf-copy-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }

.tf-link-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.tf-regen-btn {
  background: none; border: none; cursor: pointer;
  color: var(--purple-primary); font-size: 12.5px; font-weight: 600;
  font-family: inherit; display: inline-flex; align-items: center; gap: 5px;
  padding: 0;
}
.tf-regen-btn:hover { text-decoration: underline; }
.tf-regen-hint { font-size: 11.5px; }

.tf-courses-header {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 10px;
}

.tf-course-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 12px; border-radius: var(--radius-sm); background: var(--bg-subtle);
  margin-bottom: 6px;
}
.tf-course-name { font-size: 14px; font-weight: 600; color: var(--text); }

.tf-status {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.tf-status-received { background: #ecfdf5; color: #065f46; }
.tf-status-waiting { background: #f1f1f1; color: #888; }

.tf-detail {
  margin: 0 0 8px 12px; padding: 12px 14px;
  border-left: 3px solid var(--purple-primary);
  background: white; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tf-detail-teacher { font-size: 13px; font-weight: 700; color: var(--purple-primary); margin-bottom: 8px; }
.tf-detail-fields { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tf-detail-pair { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.tf-detail-pair dt { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 0; }
.tf-detail-pair dd { font-size: 13px; color: var(--text); margin: 0; }

@media (max-width: 600px) {
  .tf-detail-pair { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   Phase 3.4 — Public teacher feedback form
   ============================================================ */

.public-form-body {
  background: var(--bg);
  min-height: 100vh;
  margin: 0;
}

.public-form-shell {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 18px 60px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.public-form-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px 20px;
}

.public-form-logo { width: 44px; height: 44px; border-radius: 10px; }
.public-form-brand { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.public-form-sub { font-size: 13px; color: var(--text-muted); }

.public-form-main { flex: 1; }

.public-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 28px;
}

.public-form-title { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); }
.public-form-lead { font-size: 14.5px; color: var(--text-muted); margin: 0 0 22px; line-height: 1.5; }
.public-form-msg { font-size: 15px; color: var(--text); text-align: center; padding: 40px 28px; }

.public-form-footer { text-align: center; font-size: 12px; color: var(--text-faint); padding-top: 24px; }

.public-form-loading { text-align: center; padding: 60px; color: var(--text-muted); }

/* Picker */
.picker-list { display: flex; flex-direction: column; gap: 8px; }
.picker-item {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 16px 18px; font-size: 15px; font-weight: 600;
  background: var(--bg-subtle); border: 1.5px solid var(--border-input);
  border-radius: var(--radius-md); cursor: pointer; color: var(--text);
  font-family: inherit; transition: all var(--t-fast) var(--ease);
}
.picker-item:hover { border-color: var(--purple-primary); background: var(--purple-tint); }

/* Form */
.tform-back {
  background: none; border: none; cursor: pointer; color: var(--purple-primary);
  font-size: 13px; font-weight: 600; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 16px;
}
.tform-back:hover { text-decoration: underline; }

.tform-field { margin-bottom: 22px; }
.tform-label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.tform-label .req { color: var(--critical); }
.tform-label .muted { font-weight: 400; }

.tform-radiogroup, .tform-checkgroup { display: flex; flex-direction: column; gap: 6px; }

.tform-radio, .tform-check {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px; transition: all var(--t-fast) var(--ease);
}
.tform-radio:hover, .tform-check:hover { background: var(--bg-subtle); border-color: var(--border-input); }
.tform-radio input, .tform-check input { width: 17px; height: 17px; accent-color: var(--purple-primary); flex-shrink: 0; margin: 0; }

.tform-checkgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 560px) { .tform-checkgroup { grid-template-columns: 1fr; } }

.tform-submit { width: 100%; padding: 14px; font-size: 15px; margin-top: 8px; }
.tform-saved-hint { text-align: center; font-size: 12px; margin-top: 10px; min-height: 16px; }

.public-form-thankyou { text-align: center; }
.thankyou-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: #ecfdf5; color: var(--success); margin-bottom: 16px;
}
.public-form-thankyou .btn-secondary { margin-top: 16px; }

/* ============================================================
   Phase 3.4.2 — Public form input sizing
   ============================================================ */

.public-form-card .tform-field input[type="text"],
.public-form-card .tform-field input[type="email"],
.public-form-card .tform-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}

.public-form-card .tform-field textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  line-height: 1.5;
}

/* ============================================================
   Phase 3.5 — Parent Feedback card
   ============================================================ */

.profile-card-parent-feedback { grid-column: span 2; }
@media (max-width: 900px) { .profile-card-parent-feedback { grid-column: span 1; } }

.pf-response { margin-top: 4px; }
.pf-response-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pf-parent-name { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.pf-waiting { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 0; }
.pf-detail-fields { padding-left: 0; }

/* ============================================================
   Phase 3.7 — Transition Assessment
   ============================================================ */

.profile-card-transition { grid-column: span 2; }
@media (max-width: 900px) { .profile-card-transition { grid-column: span 1; } }

.ta-completed-banner {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
  padding: 8px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600;
  width: fit-content; margin-bottom: 14px;
}

/* Student form section grouping */
.ta-group { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.ta-group:last-of-type { border-bottom: none; }
.ta-group-title {
  font-size: 16px; font-weight: 700; color: var(--purple-primary);
  letter-spacing: -0.01em; margin-bottom: 16px;
}

/* 1-5 scale control */
.ta-scale { margin-top: 4px; }
.ta-scale-row { display: flex; gap: 8px; }
.ta-scale-dot {
  flex: 1; height: 48px; border: 1.5px solid var(--border-input);
  background: white; border-radius: var(--radius-md); cursor: pointer;
  font-size: 16px; font-weight: 700; color: var(--text-muted);
  font-family: inherit; transition: all var(--t-fast) var(--ease);
}
.ta-scale-dot:hover { border-color: var(--purple-primary); color: var(--purple-primary); }
.ta-scale-dot.selected { background: var(--purple-primary); border-color: var(--purple-primary); color: white; }
.ta-scale-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--text-muted); }

/* ============================================================
   Phase 3.8a — IEP Builder
   ============================================================ */

.iep-page { max-width: none; padding: 0; }
/* minmax(0,1fr) lets the content column shrink below its content's intrinsic
   width so long strings wrap instead of forcing a horizontal scrollbar. */
.iep-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; align-items: start; position: relative; }
@media (max-width: 900px) { .iep-layout { grid-template-columns: 1fr; } }

/* Collapsible section nav — reclaim full width for content. */
.iep-layout.toc-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.iep-layout.toc-collapsed .iep-toc { display: none; }

.iep-toc {
  position: sticky; top: 0; align-self: start; height: 100vh;
  padding: 24px 18px; border-right: 1px solid var(--border);
  overflow-y: auto; background: var(--bg-subtle);
}
@media (max-width: 900px) { .iep-toc { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); } }

.iep-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.iep-toc-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: white; color: var(--text-muted); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.iep-toc-collapse:hover { color: var(--purple-primary); border-color: var(--purple-warm); }

/* Reopen button lives in the content column; only visible once collapsed. */
.iep-toc-reopen {
  display: none; align-items: center; gap: 6px;
  margin-bottom: 16px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: white; color: var(--purple-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.iep-toc-reopen:hover { background: var(--purple-tint); }
.iep-layout.toc-collapsed .iep-toc-reopen { display: inline-flex; }

.iep-toc-back { font-size: 13px; color: var(--purple-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.iep-toc-back:hover { text-decoration: underline; }
.iep-toc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 20px 0 10px; }
.iep-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.iep-toc-link { display: block; padding: 7px 10px; font-size: 13.5px; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); border-left: 2px solid transparent; transition: all var(--t-fast) var(--ease); }
.iep-toc-link:hover { background: white; color: var(--text); }
.iep-toc-link.active { background: white; color: var(--purple-primary); border-left-color: var(--purple-primary); font-weight: 600; }

.iep-main { padding: 30px 36px 120px; max-width: 860px; min-width: 0; overflow-wrap: break-word; }
@media (max-width: 1100px) { .iep-main { padding: 28px 28px 100px; } }
@media (max-width: 900px) { .iep-main { padding: 22px 18px 80px; } }

/* On the IEP Builder at laptop widths, collapse the main app sidebar to a slim
   icon rail so the section nav + content get the room they need — no horizontal
   scroll or clipped text from ~960px up. Below 900px the sidebar already goes
   off-canvas with a toggle, so this only applies above that. */
@media (min-width: 901px) {
  .iep-builder-page .ace-sidebar { width: 60px; }
  .iep-builder-page .ace-app-main,
  .iep-builder-page .ace-footer { margin-left: 60px; }

  .iep-builder-page .brand-text,
  .iep-builder-page .nav-label,
  .iep-builder-page .sidebar-section-title,
  .iep-builder-page .sidebar-students,
  .iep-builder-page .sidebar-add-btn,
  .iep-builder-page .sidebar-logout { display: none; }

  .iep-builder-page .sidebar-brand { justify-content: center; padding: 14px 6px; gap: 0; }
  .iep-builder-page .brand-logo { width: 38px; height: 38px; }
  .iep-builder-page .sidebar-nav,
  .iep-builder-page .sidebar-footer { padding-left: 8px; padding-right: 8px; }
  .iep-builder-page .nav-item { justify-content: center; padding: 10px 0; }
}

.iep-doc-header h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.iep-doc-header p { font-size: 14px; margin: 0 0 28px; line-height: 1.5; }

.iep-section { margin-bottom: 40px; scroll-margin-top: 20px; }
.iep-section-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--border); }
.iep-section-hint { font-size: 13px; margin: 8px 0 16px; }
.iep-placeholder { font-size: 13px; padding: 20px; background: var(--bg-subtle); border-radius: var(--radius-md); border: 1px dashed var(--border-input); }

/* Context bar */
.iep-context-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.iep-context-summary { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.iep-context-icon { color: var(--purple-primary); display: inline-flex; }
.iep-context-expand { background: none; border: none; cursor: pointer; color: var(--text-muted); display: inline-flex; transition: transform var(--t-fast) var(--ease); }
.iep-context-bar.expanded .iep-context-expand { transform: rotate(90deg); }
.iep-context-detail { padding: 16px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.iep-context-fields { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .iep-context-fields { grid-template-columns: 1fr; } }
.iep-context-fields dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 2px; }
.iep-context-fields dd { font-size: 14px; margin: 0; }
.iep-context-edit { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--purple-primary); text-decoration: none; font-weight: 600; }
.iep-context-edit:hover { text-decoration: underline; }

/* Inputs status chips */
.iep-inputs-grid { display: flex; flex-direction: column; gap: 8px; }
.iep-input-chip { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-md); font-size: 13.5px; border: 1px solid var(--border); }
.iep-input-chip.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.iep-input-chip.missing { background: var(--bg-subtle); color: var(--text-muted); }
.iep-input-icon { display: inline-flex; }
.iep-input-chip.ok .iep-input-icon { color: var(--success); }
.iep-input-chip.missing .iep-input-icon { color: var(--text-faint); }
.iep-input-label { flex: 1; }
.iep-input-nudge { font-size: 12.5px; font-weight: 600; color: var(--purple-primary); text-decoration: none; }
.iep-input-nudge:hover { text-decoration: underline; }

/* Fields */
.iep-field { margin-bottom: 20px; }
.iep-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.iep-text { width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: 14px; }
.iep-text-sm { padding: 7px 10px; font-size: 13px; }
.iep-select { width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: 14px; background: white; }
.iep-select-sm { padding: 7px 10px; font-size: 13px; }

.iep-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
@media (max-width: 600px) { .iep-check-grid { grid-template-columns: 1fr; } }
.iep-check { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13.5px; cursor: pointer; transition: all var(--t-fast) var(--ease); }
.iep-check:hover { background: var(--bg-subtle); }
.iep-check input { width: 16px; height: 16px; accent-color: var(--purple-primary); flex-shrink: 0; margin: 0; }

/* Functional domains */
.iep-func-group { margin-bottom: 24px; }
.iep-func-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--purple-primary); border-bottom: 1px solid var(--purple-tint); padding-bottom: 6px; margin-bottom: 14px; }
.iep-func-domain { margin-bottom: 18px; }
.iep-func-label { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.iep-func-detail { margin: 10px 0 4px 12px; padding: 10px 12px; border-left: 2px solid var(--purple-tint); }
.iep-func-detail-label { font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 8px 0 6px; }
.iep-func-detail-label:first-child { margin-top: 0; }
.iep-func-detail .iep-text-sm { margin-top: 8px; width: 100%; }

/* Goals */
.iep-goals-list { display: flex; flex-direction: column; gap: 8px; }
.iep-goal-row { display: flex; align-items: center; gap: 12px; }
.iep-goal-label { font-size: 13.5px; width: 200px; flex-shrink: 0; }
.iep-goal-row .iep-select { flex: 1; }
.iep-goal-otherlabel { width: 200px; flex-shrink: 0; }

.iep-empty { padding: 60px; text-align: center; color: var(--text-muted); }

/* ============================================================
   Phase 3.8b — Student Information + conditional disability blocks
   ============================================================ */

.iep-disability-block { display: none; }
.iep-disability-block.active { display: block; margin-top: 24px; padding: 20px 22px; background: var(--bg-subtle); border: 1.5px solid var(--border-input); border-radius: var(--radius-lg); }

.iep-disability-block-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--purple-primary); border-bottom: 1px solid var(--purple-tint); padding-bottom: 7px; margin-bottom: 18px; }

.iep-si-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
@media (max-width: 600px) { .iep-si-grid { grid-template-columns: 1fr; } }

.iep-secondary-note { font-size: 12px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; padding: 7px 11px; border-radius: var(--radius-sm); margin-top: 7px; }

.iep-radio-row { display: flex; gap: 24px; }
.iep-radio-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.iep-radio-opt input { width: 16px; height: 16px; accent-color: var(--purple-primary); flex-shrink: 0; margin: 0; }

/* Multiple Disabilities accordions */
.iep-md-acc-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 6px; }
.iep-md-acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: white; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); font-family: inherit; text-align: left; transition: background var(--t-fast) var(--ease); }
.iep-md-acc-btn:hover { background: var(--purple-tint); }
.iep-md-acc-arrow { font-size: 12px; color: var(--text-muted); display: inline-block; transition: transform var(--t-fast) var(--ease); }
.iep-md-acc-btn.open .iep-md-acc-arrow { transform: rotate(180deg); }
.iep-md-acc-content { display: none; padding: 16px; background: white; border-top: 1px solid var(--border); }
.iep-md-acc-content.active { display: block; }

/* ============================================================
   Phase 3.8c — Academic Performance section
   ============================================================ */

.iep-acad-block { padding: 16px 18px; background: var(--bg-subtle); border: 1px solid var(--border); border-left: 4px solid var(--purple-tint); border-radius: var(--radius-md); margin-bottom: 14px; }
.iep-acad-block-title { font-size: 13.5px; font-weight: 700; color: var(--purple-primary); margin-bottom: 14px; }

.iep-textarea { resize: vertical; font-family: inherit; }

/* ============================================================
   Phase 4b.1 — chip inputs for present-levels entry
   The input stays in the DOM (it holds the state and keeps the
   control keyboard- and screen-reader-accessible); the visible
   chip is the adjacent span.
   ============================================================ */

.iep-chiprow, .iep-chipgrid { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.iep-chip { display: inline-flex; position: relative; cursor: pointer; }
.iep-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.iep-chip > span {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: white; font-size: 13px; color: var(--text);
  transition: all var(--t-fast) var(--ease);
}
.iep-chip:hover > span { border-color: var(--purple-primary); background: var(--purple-tint); }
.iep-chip input:checked + span { background: var(--purple-primary); border-color: var(--purple-primary); color: white; font-weight: 600; }
.iep-chip input:focus-visible + span { outline: 2px solid var(--purple-primary); outline-offset: 2px; }
.iep-chip-hint { font-size: 11px; opacity: 0.7; }
.iep-chip-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }

.iep-chip-add { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.iep-chip-add input { flex: 1; min-width: 0; }
.iep-chip-add-btn { font-size: 12px; font-weight: 700; color: var(--purple-primary); background: white; border: 1px solid var(--purple-tint); border-radius: var(--radius-sm); padding: 7px 14px; cursor: pointer; font-family: inherit; transition: background var(--t-fast) var(--ease); }
.iep-chip-add-btn:hover { background: var(--purple-tint); }

/* A subject's barriers only matter once it has a performance level. */
.iep-acad-barriers { display: none; }
.iep-acad-block.acad-active .iep-acad-barriers { display: block; }

/* ===== Phase 4a.4 — Team, unassigned holding, hard-delete ===== */

.ace-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* Profile menu separator + reused for the hard-delete item */
.profile-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Unassigned holding screen (app-wide when profile.org_id is NULL) */
.holding-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
.holding-card { max-width: 440px; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px; text-align: center; }
.holding-badge { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--purple-tint); color: var(--purple-primary); display: flex; align-items: center; justify-content: center; }
.holding-card h1 { font-size: 20px; margin: 0 0 10px; color: var(--text); }
.holding-card p { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.holding-join { margin-bottom: 16px; text-align: left; }
.holding-join input { text-transform: uppercase; letter-spacing: 0.08em; }
.holding-newdistrict-toggle { border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--purple-primary); cursor: pointer; padding: 0; margin-bottom: 14px; }
.holding-newdistrict { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-bottom: 16px; }
.holding-newdistrict-note { font-size: 12px; line-height: 1.5; margin: -2px 0 2px; }
.holding-card .btn-secondary { margin-top: 4px; }

/* Org admin: branding, catalog, danger zone (Phase 5.4) */
.org-brand-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 640px) { .org-brand-grid { grid-template-columns: 1fr; } }
.org-brand-grid .label-text { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.org-brand-grid input[type="color"] { width: 52px; height: 36px; padding: 2px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.team-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-code { font-size: 17px; font-weight: 700; letter-spacing: 0.14em; background: var(--purple-tint); color: var(--purple-primary); border-radius: var(--radius-sm); padding: 7px 14px; }
.settings-danger-card { border-color: #fecaca; }
.settings-danger-card .label-text { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.settings-danger-btn { color: #b91c1c; border-color: #fecaca; }
.settings-danger-btn:hover:not(:disabled) { background: #fef2f2; border-color: #b91c1c; }
.settings-danger-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Team page */
.team-add-row { display: flex; gap: 8px; align-items: center; }
.team-add-row input { flex: 1; min-width: 0; }
.team-status { margin-top: 10px; font-size: 13px; min-height: 18px; }
.team-status-ok { color: var(--success); }
.team-status-error { color: var(--critical); }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: white; margin-bottom: 8px; }
.team-info { min-width: 0; }
.team-name { font-weight: 600; color: var(--text); }
.team-meta { font-size: 13px; margin-top: 2px; }
.team-you { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--purple-primary); background: var(--purple-tint); border-radius: 10px; padding: 1px 7px; vertical-align: middle; }
.team-remove-btn { flex-shrink: 0; }

/* Hard-delete confirmation (in a drawer) */
.hard-delete-warning { display: flex; gap: 10px; align-items: flex-start; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: var(--radius-md); padding: 14px; margin-bottom: 18px; }
.hard-delete-warning strong { display: block; margin-bottom: 6px; }
.hard-delete-warning p { margin: 0; font-size: 13px; line-height: 1.5; }
.hard-delete-label { display: block; font-size: 14px; color: var(--text); margin-bottom: 8px; }
.hard-delete-input { width: 100%; }
.hard-delete-error { color: var(--critical); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* ===== Phase 5 — Goals, Services, Documents, Compliance ===== */

/* Goal builder drawer */
.goalb select, .goalb input[type="text"], .goalb input[type="number"], .goalb textarea {
  width: 100%; margin-bottom: 4px;
}
.goalb .iep-label { margin-top: 14px; }
.goalb-hint { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.goalb-type-row { display: flex; gap: 8px; margin-bottom: 4px; }
.goalb-type {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff; font-size: 13.5px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.goalb-type.selected { border-color: var(--purple-primary); color: var(--purple-primary); background: var(--purple-tint); }
.goalb-crit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.goalb-crit-row input[type="number"] { width: 84px; margin-bottom: 0; }
.goalb-crit-row select { flex: 1; margin-bottom: 0; }
.goalb-crit-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.goalb-verb-warning {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: var(--radius-md); padding: 8px 10px; font-size: 13px; margin-top: 6px;
}
.goalb-meter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.goalb-meter-item {
  font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 12px;
  border: 1px solid var(--border); color: var(--text-muted); background: #fff;
}
.goalb-meter-item.ok { border-color: var(--success); color: var(--success); background: #ecfdf5; }
.goalb-preview {
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
  padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--text); min-height: 44px;
}

/* Goals card */
.goals-group-label, .goals-suggest-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 12px 0 6px; }
.goal-row { border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; padding: 10px 12px; margin-bottom: 8px; }
.goal-row-met { opacity: 0.75; }
.goal-row-discontinued { opacity: 0.55; }
.goal-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.goal-domain-chip {
  font-size: 11.5px; font-weight: 700; color: var(--purple-primary); background: var(--purple-tint);
  border-radius: 10px; padding: 2px 9px; white-space: nowrap;
}
.goal-status-select { font-size: 12.5px; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text-muted); }
.goal-text { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.goal-baseline, .goal-progress-line { font-size: 12.5px; margin-top: 5px; }
.goal-met-chip { font-size: 11px; font-weight: 700; color: var(--success); background: #ecfdf5; border-radius: 10px; padding: 1px 7px; margin: 0 2px; }
.goal-chart { display: block; margin-top: 8px; }
.goal-chart-line { fill: none; stroke: var(--purple-primary); stroke-width: 1.8; }
.goal-chart circle { fill: var(--purple-primary); }
.goal-chart-target { stroke: var(--success); stroke-width: 1.2; stroke-dasharray: 4 3; }
.goal-row-actions { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.goal-mini-btn {
  font-size: 12px; font-weight: 600; padding: 4px 9px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #fff; color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.goal-mini-btn:hover { border-color: var(--purple-primary); color: var(--purple-primary); }
.goal-mini-danger:hover { border-color: var(--critical); color: var(--critical); }
.goals-suggest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.goal-suggest-chip {
  font-size: 12.5px; font-weight: 600; padding: 5px 11px; border: 1px dashed var(--purple-primary);
  border-radius: 14px; background: #fff; color: var(--purple-primary); cursor: pointer;
}
.goal-suggest-chip:hover { background: var(--purple-tint); }
.goal-history-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.goal-history-date { white-space: nowrap; color: var(--text-muted); width: 88px; flex-shrink: 0; }
.goal-history-value { font-weight: 600; width: 80px; flex-shrink: 0; }
.goal-history-note { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-history-del { flex-shrink: 0; }

/* Services card — reference-only chip toggles (Phase 5.1a) */
.svc-hint { font-size: 12.5px; margin: 0 0 10px; }
.svc-chipgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-chip {
  display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 12.5px;
  font-weight: 500; color: var(--text); background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 5px 11px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.svc-chip:hover { border-color: var(--purple-primary); background: var(--purple-tint); }
.svc-chip.selected { background: var(--purple-primary); border-color: var(--purple-primary); color: #fff; font-weight: 600; }
.svc-note-label { margin-top: 12px; }
.svc-note { width: 100%; font-family: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
.svc-note-status { font-size: 12px; min-height: 16px; margin-top: 3px; }

/* Goal bank browser (Phase 5.3a) */
.gbank-filters { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-bottom: 8px; }
@media (max-width: 600px) { .gbank-filters { grid-template-columns: 1fr; } }
.gbank-count { font-size: 12px; margin-bottom: 8px; }
.gbank-list { display: flex; flex-direction: column; gap: 8px; }
.gbank-row {
  display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; padding: 10px 12px;
  transition: border-color var(--t-fast) var(--ease);
}
.gbank-row:hover { border-color: var(--purple-primary); }
.gbank-row-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.gbank-subskill { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.gbank-band { font-size: 11.5px; }
.gbank-fit { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #065f46; background: #ecfdf5; border-radius: 9px; padding: 2px 7px; }
.gbank-probe { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--purple-primary); background: var(--purple-tint); border-radius: 9px; padding: 2px 7px; }
.gbank-row-text { font-size: 13px; line-height: 1.5; color: var(--text); }

/* Objectives editor (goal builder) */
.goalb-objectives { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.goalb-obj-row { display: flex; gap: 6px; align-items: flex-start; }
.goalb-obj-input { flex: 1; font-family: inherit; font-size: 13px; line-height: 1.45; resize: vertical; }

/* Probes (Phase 5.3b) */
.probe-box { border: 1px dashed var(--purple-tint); border-radius: var(--radius-md); padding: 9px 10px; margin: 8px 0; }
.probe-label { font-size: 12.5px; font-weight: 600; margin-bottom: 7px; }
.probe-box .goal-mini-btn { margin-top: 7px; }
.probe-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin: 8px 0; }
.probe-due { font-weight: 600; color: var(--purple-primary); }
.probe-manual { justify-content: flex-start; }
.probe-manual span { display: inline-flex; align-items: center; gap: 6px; }
.probe-manual svg { flex-shrink: 0; opacity: 0.7; }
.probe-sr-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #92400e; background: #fef3c7; border-radius: 9px; padding: 1px 6px; }
.probe-item { margin-bottom: 18px; }
.probe-item-prompt { font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.probe-item-num { font-weight: 700; color: var(--purple-primary); }
.probe-num-input { width: 140px; }

/* Transition plan page (Phase 5.2) */
.tp-page { max-width: 860px; margin: 0 auto; }
.tp-header { margin-bottom: 22px; }
.tp-header h1 { font-size: 24px; margin: 10px 0 6px; }
.tp-save-status { font-size: 12px; color: var(--purple-primary); font-weight: 600; }
.tp-ta-warn { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; font-weight: 600; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: var(--radius-md); padding: 9px 12px; }
.tp-gate-card { margin-top: 16px; }
.tp-area { margin-bottom: 20px; }
.tp-area-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tp-area-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--purple-primary); display: block; margin-bottom: 8px; }
.tp-area-head .tp-area-title { margin-bottom: 0; }
.tp-goal-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; padding: 10px 12px; margin-bottom: 8px; }
.tp-goal-text { font-size: 13.5px; line-height: 1.5; }
.tp-empty { font-size: 13px; margin: 0 0 8px; }
.tp-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; margin: 6px 0; cursor: pointer; }
.tp-check input { accent-color: var(--purple-primary); width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.tp-il-considered { margin-top: 8px; }
.tp-checklist { display: flex; flex-direction: column; gap: 6px; }
.tp-checklist-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; padding: 7px 10px; border-radius: var(--radius-sm); }
.tp-checklist-row.ok { background: #ecfdf5; color: #065f46; }
.tp-checklist-row.missing { background: #fef2f2; color: #991b1b; }
.tp-checklist-icon { flex-shrink: 0; margin-top: 1px; }

/* Documents card */
.doc-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; text-align: left; font-family: inherit;
}
.doc-row:hover { border-color: var(--purple-primary); }
.doc-row-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.doc-row-hint { font-size: 12px; }
.doc-textarea { width: 100%; font-family: inherit; font-size: 13.5px; line-height: 1.55; resize: vertical; }
.doc-attach-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin: 0 0 10px; cursor: pointer; }
.doc-attach-row input { accent-color: var(--purple-primary); width: 15px; height: 15px; }
.doc-attach-disabled { opacity: 0.6; cursor: default; }

/* Accommodations editor */
.accomm-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.accomm-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  background: var(--purple-tint); color: var(--purple-primary); border-radius: 14px; padding: 4px 10px;
}
.accomm-chip-x { border: none; background: none; cursor: pointer; color: var(--purple-primary); font-size: 14px; line-height: 1; padding: 0; }

/* =============================================================
   Premium sweep — accessibility, focus, motion, and the pieces
   that were carrying their styling inline.
   ============================================================= */

/* Screen-reader-only text (search labels, "already passed" hints). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Caseload cards and rows are anchors now (keyboard reachable, cmd-clickable);
   strip the default link look so they render exactly as the old divs did. */
a.caseload-card,
a.caseload-row {
  text-decoration: none;
  color: inherit;
}

/* Caseload search */
.caseload-search { flex: 1 1 220px; min-width: 180px; display: flex; }
.caseload-search-input {
  width: 100%; padding: 7px 12px; font-family: inherit; font-size: 13.5px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff;
  color: var(--text);
}
.caseload-search-input::placeholder { color: var(--text-muted); }
.caseload-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* Toast dismiss */
.ace-toast-close {
  margin-left: 4px; border: none; background: none; padding: 2px; cursor: pointer;
  color: var(--text-muted); line-height: 1; display: inline-flex; border-radius: 4px;
}
.ace-toast-close:hover { color: var(--text); background: var(--bg); }

/* Meeting card edit/delete actions (was inline styles in meetings.js). */
.meeting-actions { display: flex; gap: 6px; }
.meeting-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
  color: var(--text-muted); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.meeting-action-btn:hover { border-color: var(--purple-primary); color: var(--purple-primary); }
.meeting-action-btn.meeting-action-danger { color: var(--critical); }
.meeting-action-btn.meeting-action-danger:hover { border-color: var(--critical); color: var(--critical); }

/* District non-school-day chips (was inline styles in settings.js). */
.nsd-add-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.nsd-list { display: flex; flex-wrap: wrap; gap: 8px; }
.nsd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 13px; background: #fff;
  border: 1px solid var(--border); border-radius: 14px;
}
.nsd-remove {
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  line-height: 1; padding: 0; display: inline-flex; border-radius: 4px;
}
.nsd-remove:hover { color: var(--critical); }

/* .btn-secondary is display:flex, so the literal space between an icon and its
   label was being dropped — every icon+label secondary button read as
   "iconLabel". One gap fixes them all (Add date, Restore, Export, Download…). */
.btn-secondary { gap: 6px; }

/* Settings rows that were laying themselves out inline. */
.settings-inline-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.settings-inline-row + .settings-inline-row { margin-top: 12px; }
.settings-status { font-size: 13px; }

/* ---- Keyboard focus ----------------------------------------------------
   Inputs already swap the outline for a border + ring; buttons, links, tabs
   and chips had nothing, so keyboard users could not see where they were. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--purple-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On the purple sidebar, a purple ring is invisible — use white there. */
.ace-sidebar a:focus-visible,
.ace-sidebar button:focus-visible {
  outline-color: #fff;
}

/* ---- Reduced motion ---------------------------------------------------
   The app animates drawers, modals, toasts, cards and status dots. Honor the
   OS-level preference instead of overriding it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Transforms are deliberately left alone: the closed state of every drawer IS
     a transform (translateX(100%)), so overriding it would pin panels open.
     Zeroing the duration already makes open/close instant. */
}

/* Sidebar student filter — appears only when the caseload is long enough that
   scanning the list beats scrolling it. */
.sidebar-filter { padding: 0 12px 8px; }
.sidebar-filter-input {
  width: 100%; padding: 6px 10px; font-family: inherit; font-size: 12.5px;
  color: #fff; background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px;
}
.sidebar-filter-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.sidebar-filter-input:focus {
  outline: none; background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

/* =============================================================
   DESIGN SYSTEM v2 — calm professional
   -------------------------------------------------------------
   The rules above accumulated one phase at a time and encode an
   older look: purple gradients, 16-20px radii, near-invisible
   shadows, and a shell built around D219's purple specifically.
   This layer restates the primitives on top of the new tokens.
   It is deliberately last in the file so it wins on the cascade
   without editing 25 phases of feature CSS in place.

   Principles
   - The shell is neutral. Accent marks state, never decorates.
   - One filled button per view. Everything else is quiet.
   - Depth comes from a hairline border plus a soft shadow, not
     from heavy fills.
   - Type carries the hierarchy; colour does not have to.
   ============================================================= */

/* ---- 1. App shell ---------------------------------------------------- */

.ace-app-main { margin-left: var(--sidebar-w); }
.ace-footer   { margin-left: var(--sidebar-w); }

/* Content now scales with the viewport instead of stranding a narrow
   column in the middle of a wide screen. */
.page-content,
.homepage,
.caseload-page,
.settings-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-8) var(--sp-12);
}
.homepage { padding-top: var(--sp-8); }

@media (max-width: 1100px) {
  .page-content, .homepage, .caseload-page, .settings-page {
    padding: var(--sp-6) var(--sp-5) var(--sp-10);
  }
}

/* ---- 2. Page headers ------------------------------------------------- */

.home-header,
.caseload-header,
.settings-header,
.add-student-header,
.profile-header {
  margin-bottom: var(--sp-6);
}

.home-header h1,
.caseload-header h1,
.settings-header h1,
.add-student-header h1,
.profile-name {
  font-size: var(--fs-3xl);
  font-weight: 640;
  letter-spacing: -0.028em;
  line-height: 1.2;
  margin: 0;
}

.home-header p,
.caseload-header p,
.settings-header p {
  color: var(--text-muted);
  font-size: var(--fs-base);
  margin-top: 6px;
}

/* ---- 3. Section labels ----------------------------------------------
   The uppercase, wide-tracked, pale-grey label is the single most
   dated pattern in the app and it appears on every page. Replaced
   with sentence case at full text colour — it reads as a heading
   instead of as a disclaimer. */

.section-title,
.settings-section-title,
.sidebar-section-title,
.tf-courses-header,
.iep-acad-tf-key {
  font-size: var(--fs-sm);
  font-weight: 620;
  text-transform: none;
  letter-spacing: -0.006em;
  color: var(--text-700, var(--n-700));
}

.section-title,
.settings-section-title {
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sidebar-section-title {
  padding: var(--sp-4) var(--sp-4) 6px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* The one place small-caps still earns its keep: inline data keys inside
   a dense reference panel, where sentence case would compete with values. */
.iep-acad-tf-key {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-faint);
}

/* ---- 4. Surfaces ------------------------------------------------------
   Every card gets a hairline border AND a soft shadow. The old cards
   had shadow only at 4% opacity on an off-white page, so they never
   separated from the background. */

.ace-card,
.profile-identity,
.profile-card,
.attention-card,
.caseload-card,
.caseload-row,
.empty-state,
.empty-state-small,
.calendar-widget,
.auth-card,
.settings-card,
.student-form fieldset,
.tf-link-box,
.meeting-section,
.recent-meeting,
.public-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.profile-card,
.caseload-card,
.attention-card {
  transition: box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.profile-card:hover,
.caseload-card:hover,
.attention-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: none; /* the -2px lift read as jitter on a dense grid */
}

.auth-card,
.ace-modal {
  box-shadow: var(--shadow-xl);
}

/* ---- 5. Buttons -------------------------------------------------------
   Flat fills, no gradients. A gradient on a small control is the
   clearest "2016 admin template" tell in the old sheet. */

.btn-primary,
.ace-btn-primary,
.card-action,
.sidebar-add-btn,
.caseload-empty-cta,
.welcome-cta {
  background: var(--accent-600);
  background-image: none;
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 9px 16px;
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.006em;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.btn-primary:hover:not(:disabled),
.ace-btn-primary:hover:not(:disabled),
.card-action:hover:not(:disabled),
.sidebar-add-btn:hover:not(:disabled),
.caseload-empty-cta:hover,
.welcome-cta:hover {
  background: var(--accent-700);
  background-image: none;
  box-shadow: var(--shadow-sm);
}

.btn-primary:active:not(:disabled),
.ace-btn-primary:active:not(:disabled),
.card-action:active:not(:disabled) {
  background: var(--accent-800);
  transform: none;
}

.btn-primary:disabled,
.ace-btn-primary:disabled,
.card-action:disabled {
  background: var(--n-200);
  color: var(--text-faint);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

.btn-secondary,
.ace-btn-secondary {
  background: var(--surface);
  color: var(--text-700, var(--n-700));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  font-size: var(--fs-base);
  font-weight: 590;
  gap: 6px;
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.btn-secondary:hover,
.ace-btn-secondary:hover {
  background: var(--n-50);
  border-color: var(--n-400);
}

.ace-btn-danger {
  background: var(--critical);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.ace-btn-danger:hover:not(:disabled) { background: var(--critical-ink); }

/* Card actions are no longer full-bleed filled bars. A card is a summary;
   its action is a link-weight control, so a screen of cards has one
   visual centre of gravity instead of six competing purple slabs. */
.card-action {
  width: auto;
  align-self: flex-start;
  background: var(--surface);
  color: var(--accent-700);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.card-action:hover:not(:disabled) {
  background: var(--accent-50);
  border-color: var(--accent-200);
  color: var(--accent-700);
  box-shadow: var(--shadow-xs);
}
.card-action:disabled { background: var(--n-50); border-color: var(--border); }

/* ---- 6. Sidebar -------------------------------------------------------
   Neutral shell: the brand block loses its purple gradient so the
   chrome reads the same for any district. */

.ace-sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: none;
}

.sidebar-brand {
  background: var(--surface);
  background-image: none;
  color: var(--text);
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--border);
  gap: 10px;
  align-items: center;
}

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px;
  box-shadow: none;
}

.brand-text .brand-name {
  font-size: var(--fs-base);
  font-weight: 640;
  letter-spacing: -0.012em;
  color: var(--text);
  text-transform: none;
}
.brand-text .brand-school {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  opacity: 1;
  margin-top: 1px;
}
/* The signed-in name belongs with Sign out, not stacked under the product
   name where it reads as part of the brand lockup. */
.brand-text .brand-user { display: none; }

.sidebar-nav {
  padding: var(--sp-3) 10px;
  border-bottom: 1px solid var(--border);
}

.nav-item {
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: 520;
  color: var(--text-700, var(--n-700));
  gap: 10px;
}
.nav-item:hover { background: var(--n-100); color: var(--text); }

/* Active state: tinted row plus a flush accent rule, so the current
   page is legible at a glance without a saturated block. */
.nav-item.active {
  background: var(--accent-50);
  color: var(--accent-700);
  font-weight: 620;
  position: relative;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-600);
}

.sidebar-student {
  padding: 7px 10px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.sidebar-student:hover { background: var(--n-100); }
.student-grade { font-size: var(--fs-2xs); color: var(--text-faint); }

.sidebar-add-btn {
  margin: 10px 12px;
  padding: 8px 14px;
  font-size: var(--fs-sm);
}

.sidebar-footer { border-top: 1px solid var(--border); padding: 8px; }
.sidebar-logout {
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  color: var(--text-muted);
}
.sidebar-logout:hover { background: var(--critical-bg); color: var(--critical-ink); }

/* The sidebar is white now, so a white focus ring would be invisible.
   Restore the accent ring that the rest of the app uses. */
.ace-sidebar a:focus-visible,
.ace-sidebar button:focus-visible {
  outline-color: var(--accent-600);
}

/* Fix: this input was authored for a purple sidebar — white text on a
   translucent-white fill. It renders on the white student list, so the
   text was invisible. It only appears past 8 students, which is why it
   was never caught. */
.sidebar-filter { padding: 0 12px 8px; }
.sidebar-filter-input {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: var(--fs-xs);
}
.sidebar-filter-input::placeholder { color: var(--text-faint); }
.sidebar-filter-input:focus {
  background: var(--surface);
  border-color: var(--accent-600);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ---- 7. Form controls ------------------------------------------------- */

.auth-card input,
.auth-card select,
.student-form input[type="text"],
.student-form input[type="number"],
.student-form input[type="date"],
.student-form select,
.student-form textarea,
.notes-textarea,
.caseload-search-input,
.course-search-input,
.tf-link-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="search"],
select, textarea {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  padding: 8px 11px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.auth-card input:focus,
.auth-card select:focus,
.student-form input:focus,
.student-form select:focus,
.student-form textarea:focus,
.notes-textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-600);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

::placeholder { color: var(--text-faint); }

.student-form legend,
.label-text {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.006em;
}
.student-form fieldset { padding: var(--sp-5) var(--sp-5) var(--sp-6); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-600); }

/* ---- 8. Status pills and dots ----------------------------------------
   Tinted fill + matching hairline + dark ink. The old pills were fill
   and ink only, so they floated. */

.ace-pill,
.tf-status,
.meeting-type-pill,
.caseload-card-pill,
.profile-deadline {
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: -0.004em;
  padding: 3px 9px;
  border: 1px solid transparent;
}

.ace-pill-success, .tf-status-received,
.profile-deadline.urgency-clear,
.profile-deadline.urgency-comfortable {
  background: var(--success-bg); color: var(--success-ink); border-color: var(--success-border);
}
.ace-pill-warning, .tf-status-waiting,
.profile-deadline.urgency-soon {
  background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-border);
}
.ace-pill-critical,
.profile-deadline.urgency-critical,
.profile-deadline.urgency-overdue {
  background: var(--critical-bg); color: var(--critical-ink); border-color: var(--critical-border);
}
.ace-pill-neutral {
  background: var(--n-100); color: var(--n-700); border-color: var(--n-200);
}
.ace-pill-purple,
.profile-deadline.urgency-approaching {
  background: var(--info-bg); color: var(--info-ink); border-color: var(--info-border);
}

/* Status dots get a ring so they hold their edge on tinted rows. */
.status-dot, .card-status-dot {
  box-shadow: 0 0 0 2px var(--surface);
}
.dot-gray, .card-status-dot.dot-gray { background: var(--n-300); }

/* ---- 9. Cards: profile, caseload, attention -------------------------- */

.profile-card-grid { gap: var(--sp-4); }
.profile-card { padding: var(--sp-5); border-radius: var(--radius-xl); }

.card-header { margin-bottom: 8px; gap: 10px; }
.card-title { font-size: var(--fs-base); font-weight: 620; letter-spacing: -0.008em; }
.card-icon {
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  background: var(--n-100);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.card-icon .ace-icon { width: 15px; height: 15px; }
.card-status-text { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

.profile-identity { padding: var(--sp-6); }
.profile-meta { font-size: var(--fs-base); margin-top: 4px; }

.attention-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4);
}
.attention-card {
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--border-strong);
}
.attention-approaching { border-left-color: var(--warning); }
.attention-critical,
.attention-overdue { border-left-color: var(--critical); }
.attention-name { font-size: var(--fs-md); font-weight: 620; }
.attention-action { color: var(--accent-700); font-size: var(--fs-sm); }

.caseload-card { padding: var(--sp-4) var(--sp-5); }
.caseload-card-name { font-size: var(--fs-md); font-weight: 620; }

/* ---- 10. Overlays: modal, drawer, toast ------------------------------
   Purple gradient headers replaced with a neutral header + rule. The
   dialog is a surface, not a branded banner. */

.ace-drawer,
.notes-drawer,
.ace-modal,
.profile-menu,
.cal-popover {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
}
.ace-drawer, .notes-drawer {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  border-right: none;
  box-shadow: var(--shadow-xl);
}

.ace-drawer-header,
.notes-drawer-header {
  background: var(--surface);
  background-image: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius-xl);
  padding: var(--sp-4) var(--sp-5);
}
.ace-drawer-header h2,
.notes-drawer-header h3 {
  font-size: var(--fs-lg);
  font-weight: 640;
  letter-spacing: -0.014em;
  color: var(--text);
}

.ace-drawer-close,
.notes-close {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: var(--radius-md);
  width: 30px; height: 30px;
  font-size: 17px;
}
.ace-drawer-close:hover,
.notes-close:hover { background: var(--n-100); color: var(--text); }

/* Auto-save status sat on the purple header in white; it's on a white
   header now. */
.notes-status { color: var(--text-muted); }
.notes-status-saving { color: var(--text-muted); }
.notes-status-saved  { color: var(--success); }
.notes-status-error  { color: var(--critical); }

.ace-modal { border-radius: var(--radius-xl); padding: var(--sp-6); }
.ace-modal h3 { font-size: var(--fs-lg); font-weight: 640; }
.ace-modal-message { font-size: var(--fs-base); }

.ace-toast {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-base);
}
.ace-toast-info .ace-toast-icon { background: var(--accent-600); }

/* ---- 11. Notes FAB ---------------------------------------------------
   A round floating Material button in a non-Material app, sitting on
   top of page content. Made a squared, bordered control that reads as
   part of this system. */

.notes-fab {
  width: auto;
  height: 38px;
  padding: 0 14px;
  gap: 8px;
  border-radius: var(--radius-md);
  background: var(--surface);
  background-image: none;
  color: var(--text-700, var(--n-700));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  bottom: 22px;
  right: 22px;
}
.notes-fab:hover {
  background: var(--n-50);
  border-color: var(--n-400);
  box-shadow: var(--shadow-lg);
  transform: none;
}
.notes-fab .ace-icon { width: 16px; height: 16px; }

/* ---- 12. Calendar ----------------------------------------------------- */

.calendar-widget { padding: var(--sp-5); }
.calendar-title { font-size: var(--fs-md); font-weight: 640; letter-spacing: -0.012em; }

.cal-cell {
  min-height: 74px;
  border-radius: var(--radius-md);
  border-color: var(--border);
  background: var(--surface);
}
.cal-cell:hover { background: var(--n-50); border-color: var(--border-strong); }
.cal-today { background: var(--accent-50); border-color: var(--accent-200); }
.cal-today .cal-daynum { color: var(--accent-700); }
.cal-approaching { background: var(--warning-bg); border-color: var(--warning-border); }
.cal-critical, .cal-overdue { background: var(--critical-bg); border-color: var(--critical-border); }
.cal-dow { color: var(--text-faint); font-size: var(--fs-2xs); letter-spacing: 0.02em; }

.cal-nav-btn, .cal-today-btn, .cal-view-btn {
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--text-700, var(--n-700));
}
.cal-nav-btn:hover, .cal-today-btn:hover {
  background: var(--n-100);
  border-color: var(--border-strong);
  color: var(--text);
}
.cal-view-btn.active { background: var(--accent-600); color: #fff; }

.cal-week-cell { border-radius: var(--radius-md); }
.cal-week-event { border-radius: var(--radius-xs); font-weight: 550; }

/* ---- 13. Empty states -------------------------------------------------
   Were a bare glyph over grey text on a shadowless panel. Now a proper
   composition: framed icon, headline at text weight, muted support. */

.empty-state {
  padding: var(--sp-10) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.empty-state-icon,
.caseload-empty-icon,
.settings-empty-icon,
.welcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: 0 auto var(--sp-3);
  border-radius: var(--radius-lg);
  background: var(--n-100);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 20px;
}
.empty-state h2, .empty-state h3 {
  font-size: var(--fs-lg);
  font-weight: 620;
  margin-bottom: 6px;
}
.empty-state p, .empty-state .muted {
  color: var(--text-muted);
  font-size: var(--fs-base);
  margin-left: auto;
  margin-right: auto;
}
.empty-state-small {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg);
}

/* ---- 14. Settings ----------------------------------------------------- */

.settings-card { border-radius: var(--radius-xl); overflow: hidden; }
.settings-row { padding: var(--sp-3) var(--sp-5); }
.settings-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 550; }
.settings-value { font-size: var(--fs-base); color: var(--text); }
.settings-section { margin-bottom: var(--sp-8); }
.nsd-chip {
  border-radius: var(--radius-md);
  border-color: var(--border-strong);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-xs);
}

/* ---- 15. Auth + public forms ------------------------------------------
   These pages are the first thing a new district sees, and the only
   ones an outside teacher or parent ever sees. */

.ace-header,
.public-form-header {
  background: var(--surface);
  background-image: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.ace-logo, .public-form-brand {
  color: var(--text);
  font-weight: 640;
  letter-spacing: -0.014em;
  font-size: var(--fs-lg);
}
.ace-header-logo, .public-form-logo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.header-btn {
  background: var(--surface);
  color: var(--text-700, var(--n-700));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 590;
  padding: 7px 13px;
}
.header-btn:hover { background: var(--n-50); border-color: var(--n-400); }

.auth-main { background: var(--bg); }
.auth-card { padding: var(--sp-8); border-radius: var(--radius-xl); }
.auth-card h2 { font-size: var(--fs-2xl); font-weight: 640; letter-spacing: -0.022em; }
.auth-page-logo {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  width: 60px; height: 60px;
}
.auth-links a { color: var(--accent-700); font-weight: 550; }

.public-form-card { padding: var(--sp-8); border-radius: var(--radius-xl); }
.public-form-title { font-size: var(--fs-2xl); font-weight: 640; letter-spacing: -0.022em; }

.error-msg {
  background: var(--critical-bg);
  border-color: var(--critical-border);
  color: var(--critical-ink);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.success-msg {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-ink);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

/* ---- 16. Links + focus ------------------------------------------------ */

a { color: var(--accent-700); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---- 17. Chips + accommodations --------------------------------------- */

.accomm-chip, .course-pill, .prep-auto-badge {
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.accomm-chip {
  background: var(--accent-50);
  color: var(--accent-700);
  border: 1px solid var(--accent-200);
}
.prep-auto-badge {
  background: var(--n-100);
  color: var(--text-muted);
  border: 1px solid var(--border);
  text-transform: none;
  letter-spacing: -0.004em;
}

/* Signed-in identity moved out of the brand lockup and paired with
   Sign out, where it belongs. */
.sidebar-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 6px 10px 2px;
}
.sidebar-account-name {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-account .sidebar-logout {
  flex: 0 0 auto;
  padding: 6px 8px;
  font-size: var(--fs-xs);
}

/* ---- 18. Homepage: two-column shell ----------------------------------
   A single attention card used to sit alone in the middle of a wide
   screen. The rail gives the page a second column of real content and
   an anchor on the right, so the layout holds at any width. */

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 1000px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-rail { order: -1; }
}

.home-main { min-width: 0; }
.home-section + .home-section { margin-top: var(--sp-8); }

.glance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-2) var(--sp-4);
}

.glance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 0;
}
.glance-row + .glance-row { border-top: 1px solid var(--border); }

.glance-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.glance-value {
  font-size: var(--fs-xl);
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}
.glance-value.glance-warning  { color: var(--warning-ink); }
.glance-value.glance-critical { color: var(--critical-ink); }
.glance-value.glance-success  { color: var(--text); }

/* Collapsible calendar disclosure — was a grey uppercase "show / hide". */
.home-calendar-summary {
  gap: var(--sp-2);
  padding: 0;
  margin-bottom: var(--sp-3);
}
.home-calendar-summary .section-title { margin: 0; }
.home-calendar-hint {
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: normal;
  color: var(--accent-700);
  font-weight: 550;
}
.home-calendar[open] .home-calendar-hint { visibility: hidden; }
.home-calendar[open] .home-calendar-hint::after {
  content: "Hide";
  visibility: visible;
}

/* Attention cards read as a scannable stack, not a sparse card wall. */
.attention-headline { font-size: var(--fs-base); font-weight: 590; margin-top: 6px; }
.attention-subline  { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }

/* ---- 19. Measure ------------------------------------------------------
   List pages earn the full 1240px; form and settings pages do not. A
   settings row 1240px wide puts its label and value at opposite ends of
   the monitor. */

.settings-page,
.add-student-header,
.student-form {
  max-width: 880px;
}
.add-student-header, .student-form { margin-left: auto; margin-right: auto; }

.settings-note,
.settings-card + .muted,
.field-hint { max-width: 68ch; }

/* Caseload cards sit a little wider so the pill and meta don't wrap. */
.caseload-grid { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--sp-4); }

/* ---- 20. Primary-action discipline -----------------------------------
   Caseload and Add Student each carry their own filled "New Student"
   button. With the sidebar's also filled, two identical purple slabs
   competed on the same screen. The sidebar's is persistent chrome, so
   it steps down to a quiet control and the page action stays primary. */

.sidebar-add-btn {
  background: var(--surface);
  background-image: none;
  color: var(--text-700, var(--n-700));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
  font-weight: 590;
}
.sidebar-add-btn:hover:not(:disabled) {
  background: var(--n-50);
  background-image: none;
  border-color: var(--n-400);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

/* ---- 21. The remaining uppercase labels -------------------------------
   Section 3 caught the page-level ones; these are the in-card headings
   the same pattern spread to. In every case the DOM text is already
   sentence case and the stylesheet was uppercasing it, so dropping
   text-transform restores the authored wording.

   Tag-like micro-labels (auto badges, fit/probe chips) keep their caps —
   at 10px on a chip, caps genuinely read better — but lose the heavy
   weight and wide tracking that made them shout. */

.prep-checklist-header h4,
.tf-link-label,
.goals-suggest-label,
.goals-group-label,
.iep-toc-title,
.iep-func-group-title,
.iep-disability-block-title,
.tp-area-title,
.iep-context-fields dt,
.settings-section-title,
.tf-courses-header {
  text-transform: none;
  letter-spacing: -0.006em;
  font-size: var(--fs-sm);
  font-weight: 620;
  color: var(--text-700, var(--n-700));
}

/* Group titles that were purple underlined rules — quieter, and neutral
   so they don't tint with the org accent for no reason. */
.iep-func-group-title,
.iep-disability-block-title {
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.tp-area-title { color: var(--text); }

.iep-context-fields dt {
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--text-muted);
}

.prep-count,
.iep-chip-tag,
.gbank-fit,
.gbank-probe,
.probe-sr-tag,
.tf-status {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.prep-count { text-transform: none; letter-spacing: -0.004em; font-size: var(--fs-sm); color: var(--text-muted); }

.gbank-fit   { background: var(--success-bg); color: var(--success-ink); border-radius: var(--radius-full); }
.gbank-probe { background: var(--accent-50); color: var(--accent-700); border-radius: var(--radius-full); }
.probe-sr-tag{ background: var(--warning-bg); color: var(--warning-ink); border-radius: var(--radius-full); }

/* Meeting type pill — was a wide-tracked caps block. */
.meeting-type-pill {
  text-transform: none;
  letter-spacing: -0.004em;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--n-100);
  color: var(--n-700);
  border: 1px solid var(--border);
}

/* "Mark complete" is the meeting's real action — it was reading as
   disabled next to the icon buttons. */
.meeting-mark-btn {
  background: var(--surface);
  color: var(--text-700, var(--n-700));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-weight: 590;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-xs);
}
.meeting-mark-btn:hover:not(:disabled) {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-ink);
}

/* The IEP Builder card kept a status dot after the others dropped theirs;
   an always-grey dot carries no information. */
.profile-card .card-status-dot.dot-gray { display: none; }

/* ---- 22. Disabled controls -------------------------------------------
   A blanket opacity: 0.5 fades the border and text together, so a
   disabled button reads as a rendering fault rather than a state.
   Give it its own flat treatment instead. */

.btn-secondary:disabled,
.ace-btn-secondary:disabled,
.meeting-mark-btn:disabled {
  opacity: 1;
  background: var(--n-50);
  color: var(--text-faint);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-secondary:disabled:hover,
.ace-btn-secondary:disabled:hover,
.meeting-mark-btn:disabled:hover {
  background: var(--n-50);
  border-color: var(--border);
  color: var(--text-faint);
}

/* ---- 23. Public form pages -------------------------------------------
   Teachers and parents only ever see these, so they carry the product's
   first impression outside the district. The header was a white slab
   floating above the card with a hard bottom rule; it reads better as
   a plain page header on the page background. */

.public-form-body { background: var(--bg); }

.public-form-header {
  background: transparent;
  border-bottom: none;
  padding: var(--sp-8) 0 var(--sp-5);
}
.public-form-shell { padding-inline: var(--sp-5); }
.public-form-logo { width: 36px; height: 36px; }
.public-form-brand { font-size: var(--fs-md); }
.public-form-sub { color: var(--text-muted); font-size: var(--fs-sm); }

.public-form-card { box-shadow: var(--shadow-md); }
.public-form-lead { color: var(--text-muted); font-size: var(--fs-md); }
.public-form-footer {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  padding: var(--sp-8) 0 var(--sp-6);
}

/* Course / option picker rows */
.picker-item {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font-weight: 590;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.picker-item:hover {
  background: var(--accent-50);
  border-color: var(--accent-200);
}

/* ---- 24. Auth header lockup -------------------------------------------
   .ace-header-inner is space-between, and the mark and wordmark were
   siblings — so on a wide screen they flew to opposite ends of the
   header. They're one lockup now.

   The Ace mark is already a filled, rounded, gradient tile. Framing it
   in a white bordered box drew a tile around a tile. */

.ace-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ace-header-inner { justify-content: flex-start; gap: var(--sp-4); }
.ace-header-inner .header-btn { margin-left: auto; }

.ace-header-logo,
.auth-page-logo,
.public-form-logo {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.ace-header-logo { width: 26px; height: 26px; margin-right: 0; border-radius: var(--radius-sm); }
.auth-page-logo  { width: 48px; height: 48px; border-radius: var(--radius-lg); }
.public-form-logo{ border-radius: var(--radius-md); }

.ace-logo { font-size: var(--fs-md); letter-spacing: -0.012em; }
.auth-logo-wrap { margin: var(--sp-10) auto var(--sp-5); }

/* ---- 25. IEP Builder --------------------------------------------------
   The builder collapses the app sidebar to a 60px icon rail. The new
   account row has to collapse with it — otherwise the signed-in name
   renders into a 60px column and truncates to "T…". */

@media (min-width: 901px) {
  .iep-builder-page .sidebar-account { display: none; }
}

/* Document typography: a 2px rule under every section heading was the
   heaviest line on the page and there is one per section. */
.iep-section-title {
  font-size: var(--fs-xl);
  font-weight: 640;
  letter-spacing: -0.02em;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.iep-doc-header h1 {
  font-size: var(--fs-2xl);
  font-weight: 640;
  letter-spacing: -0.024em;
}
.iep-doc-header p,
.iep-section-hint { color: var(--text-muted); font-size: var(--fs-base); }

.iep-toc-title { margin-top: var(--sp-5); }
.iep-toc-link { border-radius: var(--radius-md); font-size: var(--fs-sm); }
.iep-toc-link.active {
  background: var(--surface);
  color: var(--accent-700);
  border-left-color: var(--accent-600);
}

.iep-context-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.iep-context-bar:hover { border-color: var(--border-strong); }

.iep-placeholder {
  background: var(--n-50);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

/* Present-levels chips */
.iep-chip > span,
.chipChecks label > span,
.chipRadios label > span {
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: var(--fs-base);
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.iep-chip input:checked + span,
.chipChecks input:checked + span,
.chipRadios input:checked + span {
  background: var(--accent-50);
  border-color: var(--accent-400);
  color: var(--accent-700);
  font-weight: 590;
}

/* ---- 26. Mobile shell restore -----------------------------------------
   This layer is deliberately last in the file, which means an unlayered
   rule here outranks an equal-specificity rule inside an EARLIER media
   query — media queries add no specificity. Section 1 re-declared
   .ace-app-main / .ace-footer margin-left, which silently beat the
   max-width:900px rules at line ~687 that pull content back when the
   sidebar goes off-canvas. Restated here so the breakpoint wins again.

   Anything else this layer restates must be re-asserted the same way. */

@media (max-width: 900px) {
  .ace-app-main {
    margin-left: 0;
    padding-top: 60px;
  }
  .ace-footer { margin-left: 0; }
}

/* The mobile sidebar toggle is a floating control over page content —
   it needs the same treatment as the rest of the system. */
.sidebar-toggle {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-700, var(--n-700));
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .sidebar-toggle { display: inline-flex; }
  .ace-sidebar { box-shadow: var(--shadow-xl); }
}

/* =============================================================
   Student profile — workflow overhaul
   =============================================================
   The profile used to be one flat grid of nine equal cards. It is now
   identity + stage rail → next step → Prepare / Write / Reference. These
   rules add the new chrome and stop the grid stretching cards into dead
   space (the old layout padded a short card to match a tall neighbour,
   which is where most of the empty space on the page came from).
   ------------------------------------------------------------- */

/* ---- Stage rail: where this student stands, at a glance -------------- */
.stage-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 7px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 560;
  border: 1px solid transparent;
  white-space: nowrap;
}
.stage-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.stage-done   { background: var(--success-bg); border-color: var(--success-border); color: var(--success-ink); }
.stage-done .stage-dot { background: var(--success); color: #fff; }
.stage-started{ background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-ink); }
.stage-started .stage-dot { background: transparent; border: 2px solid var(--warning); }
.stage-todo   { background: var(--n-50); border-color: var(--border); color: var(--text-muted); }
.stage-todo .stage-dot { background: transparent; border: 1.5px dashed var(--border-strong); }

/* ---- Next step: one recommendation, never an action taken for you ---- */
.next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--accent-200);
  background: linear-gradient(180deg, var(--accent-50), var(--bg-card));
  box-shadow: var(--shadow-xs);
}
.next-step-body { min-width: 260px; flex: 1; }
.next-step-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: 5px;
}
.next-step-title {
  font-size: var(--fs-lg);
  font-weight: 640;
  letter-spacing: -0.014em;
  margin: 0 0 4px;
  color: var(--text);
}
.next-step-text {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  max-width: 62ch;
}
.next-step-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-600);
  background: var(--accent-600);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.next-step-cta:hover { background: var(--accent-700); box-shadow: var(--shadow-sm); }
.next-step-cta svg { opacity: 0.9; }

/* Waiting on someone else, and everything-done, are not "do this now" —
   they get the same layout in a calmer colour so the accent means action. */
.next-step-waiting { border-color: var(--warning-border); background: linear-gradient(180deg, var(--warning-bg), var(--bg-card)); }
.next-step-waiting .next-step-eyebrow { color: var(--warning-ink); }
.next-step-waiting .next-step-cta { background: var(--bg-card); color: var(--warning-ink); border-color: var(--warning-border); }
.next-step-waiting .next-step-cta:hover { background: var(--warning-bg); }
.next-step-clear { border-color: var(--success-border); background: linear-gradient(180deg, var(--success-bg), var(--bg-card)); }
.next-step-clear .next-step-eyebrow { color: var(--success-ink); }
.next-step-clear .next-step-cta { background: var(--bg-card); color: var(--success-ink); border-color: var(--success-border); }
.next-step-clear .next-step-cta:hover { background: var(--success-bg); }

/* ---- Sections: Prepare / Write / Reference --------------------------- */
.profile-section { margin-bottom: var(--sp-8); }
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.section-subtitle { font-size: var(--fs-sm); color: var(--text-faint); }
.section-gate-note {
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin: calc(var(--sp-8) * -1 + var(--sp-2)) 0 var(--sp-8);
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--border-strong);
  background: var(--n-25);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: 78ch;
}

/* Reference collapses, so an empty student doesn't open to a wall of
   unselected service chips and document buttons. */
.section-toggle {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.section-chevron {
  display: inline-flex;
  align-self: center;
  color: var(--text-faint);
  transition: transform var(--t-fast) var(--ease);
}
.section-open .section-chevron { transform: rotate(90deg); }
.section-toggle:hover .section-title { color: var(--text-2); }

/* ---- Grid: stop stretching short cards into tall empty boxes --------- */
.profile-card-grid { align-items: start; }

/* Briefly mark the card a next-step button just jumped to. */
@keyframes cardFlash {
  0%   { box-shadow: 0 0 0 0 var(--accent-ring); }
  30%  { box-shadow: 0 0 0 4px var(--accent-ring); }
  100% { box-shadow: 0 0 0 0 var(--accent-ring); }
}
.card-flash { animation: cardFlash 1.4s var(--ease); border-color: var(--accent-400) !important; }

@media (max-width: 700px) {
  .next-step { padding: var(--sp-4); }
  .next-step-cta { width: 100%; justify-content: center; }
}

/* The old flat grid gave Meeting, Teacher Feedback, Parent Feedback and
   Transition Assessment `grid-column: span 2` each — so every card that
   actually held content was full width, which is why an empty student ran to
   ~2,200px of scroll. Sections are narrower in scope and read as a true 2-up. */
.profile-card-meetings,
.profile-card-teacher-feedback,
.profile-card-parent-feedback,
.profile-card-transition { grid-column: auto; }

/* The sections host is a plain block — each section owns its own card grid.
   (It used to carry .profile-card-grid itself, which turned the sections into
   grid items and laid Prepare and Write out side by side.) */
.profile-sections { display: block; }

/* `hidden` is a UA-stylesheet display:none, so an author `display: grid` beats
   it — the collapsed Reference section rendered wide open without this. */
.profile-card-grid[hidden] { display: none; }

/* =============================================================
   Phase 6 — benchmarks, faceted goal bank, progress monitoring
   ============================================================= */

/* ---- goal builder: stepped workflow ---- */
.goalb-rail { display: flex; gap: 4px; list-style: none; margin: 14px 0 16px; padding: 0; }
.goalb-rail[hidden] { display: none; }
.goalb-rail-step {
  flex: 1; display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 8px; border-radius: var(--radius-md); border: 1px solid transparent;
  font-size: 12px; color: var(--text-muted); min-width: 0;
}
.goalb-rail-step:hover { background: var(--surface-2); }
.goalb-rail-step.current { border-color: var(--accent-200); background: var(--accent-50); color: var(--accent-700); font-weight: 600; }
.goalb-rail-step.done { color: var(--success-ink); }
.goalb-rail-dot {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--n-100, #eef0f4); color: var(--text-muted);
}
.goalb-rail-step.current .goalb-rail-dot { background: var(--accent-600, var(--accent)); color: #fff; }
.goalb-rail-step.done .goalb-rail-dot { background: var(--success-bg); color: var(--success-ink); }
.goalb-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .goalb-rail-label { display: none; } }

.goalb-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
.goalb-nav[hidden] { display: none; }
.goalb-nav button { min-width: 110px; }
.goalb-step-lead { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 12px; }

/* Annual vs postsecondary: the grammar switch hides what does not apply. */
.goalb[data-type="annual"] .goalb-transition { display: none; }
.goalb[data-type="transition"] .goalb-annual { display: none; }
.goalb[data-type="transition"] .goalb-behavior-label::first-line { font-weight: 600; }

.goalb-source {
  display: block; font-size: 12.5px; line-height: 1.5;
  background: var(--accent-50); border: 1px solid var(--accent-200);
  border-radius: var(--radius-md); padding: 9px 11px; margin-bottom: 14px; color: var(--accent-700);
}
.goalb-source svg { vertical-align: -2px; margin-right: 4px; }
.goalb-source-note { margin-top: 6px; color: var(--text-muted); font-weight: 400; }

.goalb-direction-note {
  font-size: 12px; line-height: 1.5; color: var(--warning-ink);
  background: var(--warning-bg); border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm); padding: 7px 9px; margin: -2px 0 10px;
}
.goalb-meter-note { display: block; width: 100%; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* ---- goal builder: benchmark editor ---- */
.goalb-bm-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.goalb-bm { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 11px; background: var(--surface); }
.goalb-bm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.goalb-bm-num {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  background: var(--accent-100); color: var(--accent-700);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.goalb-bm-window { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.goalb-bm-behavior { width: 100%; font-family: inherit; font-size: 13px; line-height: 1.45; resize: vertical; margin-bottom: 8px; }
.goalb-bm-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.goalb-bm-target-label { font-size: 12px; color: var(--text-muted); }
.goalb-bm-target { width: 84px; margin-bottom: 0 !important; }
.goalb-bm-unit { font-size: 12px; color: var(--text-muted); }
.goalb-bm-scaffold { font-size: 11.5px; color: var(--text-muted); font-style: italic; }

.goalb-bm-preview { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.goalb-bm-preview-row {
  display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
  border-left: 2px solid var(--accent-200); padding-left: 9px;
}
.goalb-bm-preview-num { font-weight: 700; color: var(--accent-700); flex: 0 0 auto; }

/* ---- goal builder: monitoring plan ---- */
.goalb-plan { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 13px; background: var(--surface-2); }
.goalb-plan-manual { border-style: dashed; }
.goalb-plan-manual p { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 6px 0 0; }
.goalb-plan-title { font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.goalb-plan-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; font-size: 12.5px; }
.goalb-plan-grid dt { color: var(--text-muted); }
.goalb-plan-grid dd { margin: 0; }
.goalb-plan-phases { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.goalb-plan-phase {
  font-size: 11.5px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 3px 9px;
}
.goalb-plan-phase-key { font-size: 11px; color: var(--text-muted); }
.goalb-plan-admin { font-size: 12px; line-height: 1.55; color: var(--text-muted); margin: 10px 0 0; }

.ace-btn-primary.is-blocked { opacity: 0.5; cursor: not-allowed; }

/* ---- goal bank browser ---- */
.gbank-lead { font-size: 13px; margin: 0 0 12px; line-height: 1.55; }
.gbank-filters-2 { grid-template-columns: 1fr 1fr auto; margin-top: -2px; }
@media (max-width: 600px) { .gbank-filters-2 { grid-template-columns: 1fr; } }
.gbank-row { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.gbank-row.expanded { border-color: var(--accent-400); box-shadow: 0 0 0 3px var(--accent-ring); }
.gbank-row-main {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; padding: 11px 12px; cursor: pointer; font: inherit; color: inherit;
}
.gbank-row-main:hover { background: var(--accent-wash); }
.gbank-row-skill { font-size: 13px; font-weight: 650; margin-bottom: 4px; }
.gbank-fit-band { background: var(--accent-50); color: var(--accent-700); }
.gbank-detail { border-top: 1px solid var(--border); padding: 12px; background: var(--surface-2); }
.gbank-detail-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px;
}
.gbank-bm { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.gbank-bm li { font-size: 12.5px; line-height: 1.5; }
.gbank-bm-win { font-weight: 700; color: var(--accent-700); margin-right: 4px; }
.gbank-detail-p { font-size: 12.5px; line-height: 1.55; margin: 0 0 10px; }
.gbank-detail-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; }
.gbank-note {
  font-size: 12px; line-height: 1.55; font-style: italic; color: var(--accent-700);
  background: var(--accent-50); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 0 10px;
}
.gbank-use { width: 100%; }
.gbank-more { width: 100%; margin-top: 10px; }

/* ---- goals card: overview strip ---- */
.goals-overview { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.goals-ov-chip {
  font-size: 11.5px; border-radius: var(--radius-full); padding: 3px 10px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
}
.goals-ov-chip.ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success-ink); }
.goals-ov-chip.warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-ink); }
.goals-ov-chip.due { background: var(--accent-50); border-color: var(--accent-200); color: var(--accent-700); }

.goal-skill-chip { font-size: 11.5px; color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-dir-chip { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warning-ink); background: var(--warning-bg); border-radius: var(--radius-full); padding: 1px 7px; }

/* ---- goals card: benchmark rail ---- */
.goal-bm-rail { display: flex; flex-direction: column; gap: 4px; margin: 9px 0; }
.goal-bm-rung {
  display: flex; align-items: center; gap: 9px; font-size: 12px;
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-sm); padding: 5px 9px; background: var(--surface);
}
.goal-bm-rung.none { border-left-color: var(--border-strong); }
.goal-bm-rung.low  { border-left-color: var(--warning); background: var(--warning-bg); }
.goal-bm-rung.near { border-left-color: var(--accent-400); background: var(--accent-50); }
.goal-bm-rung.met  { border-left-color: var(--success); background: var(--success-bg); }
.goal-bm-rung-n {
  width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%;
  background: var(--n-100, #eef0f4); color: var(--text-muted);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.goal-bm-rung.met .goal-bm-rung-n { background: var(--success); color: #fff; }
.goal-bm-rung-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.goal-bm-rung-win { font-size: 10.5px; color: var(--text-muted); }
.goal-bm-rung-beh { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-bm-rung-val { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.goal-bm-rung.none .goal-bm-rung-val { font-weight: 400; color: var(--text-muted); font-size: 11px; }

/* ---- goals card: chart + decision rule ---- */
.goal-chart { display: block; margin-top: 8px; max-width: 340px; }
.goal-chart-aim { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.75; }
.goal-chart-dot-manual { fill: var(--surface); stroke: var(--accent-600, var(--accent)); stroke-width: 1.5; }
.goal-decision {
  display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.5;
  border-radius: var(--radius-sm); padding: 7px 9px; margin: 8px 0;
}
.goal-decision svg { flex: 0 0 auto; margin-top: 1px; }
.goal-decision.warn { background: var(--warning-bg); color: var(--warning-ink); border: 1px solid var(--warning-border); }
.goal-decision.good { background: var(--success-bg); color: var(--success-ink); border: 1px solid var(--success-border); }
.goal-decision.ok   { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.goal-decision.muted { color: var(--text-muted); font-size: 11.5px; padding: 2px 0; }

.probe-phase {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent-700); background: var(--accent-50); border-radius: var(--radius-full); padding: 1px 7px;
}

/* ---- history rows with per-benchmark breakdown ---- */
.goal-history-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.goal-history-src { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.goal-history-bd { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- log-data drawer: benchmark inputs ---- */
.gp-bm-inputs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.gp-bm-input { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.gp-bm-num {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
  background: var(--accent-100); color: var(--accent-700);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.gp-bm-beh { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.gp-bm-val { width: 72px; margin-bottom: 0 !important; }

/* ---- observation probe scoring ---- */
.obs-admin {
  font-size: 12.5px; line-height: 1.55; background: var(--accent-50);
  border: 1px solid var(--accent-200); border-radius: var(--radius-md);
  padding: 9px 11px; margin-bottom: 8px; color: var(--accent-700);
}
.obs-phase { font-size: 11.5px; margin-bottom: 12px; }
.obs-items { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.obs-item { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 11px; }
.obs-item-head { font-size: 13px; line-height: 1.45; font-weight: 600; margin-bottom: 7px; }
.obs-item-hint { font-size: 11.5px; line-height: 1.45; margin-bottom: 8px; }
.obs-tier {
  display: inline-grid; place-items: center; width: 22px; height: 17px;
  border-radius: var(--radius-full); background: var(--accent-100); color: var(--accent-700);
  font-size: 10px; font-weight: 700; margin-right: 5px; vertical-align: 1px;
}
.obs-tally-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.obs-tally-row input { width: 70px; margin-bottom: 0 !important; }
.obs-rubric { display: flex; flex-direction: column; gap: 5px; }
.obs-rubric-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; cursor: pointer; }
.obs-rubric-opt strong { color: var(--accent-700); margin-right: 4px; }
.obs-value-row { display: flex; align-items: center; gap: 8px; }
.obs-value-input { width: 110px; margin-bottom: 0 !important; }
.obs-value-unit { font-size: 12px; color: var(--text-muted); }
.obs-preview {
  font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 9px 11px; margin-bottom: 14px;
}

/* ---- student probe form: timer, progress, short text ---- */
.probe-timer { text-align: center; margin: 18px 0 22px; }
.probe-timer-face {
  font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em; margin-bottom: 12px; color: var(--accent-700);
}
.probe-timer-face.low { color: var(--danger, #b42318); }
.probe-timer-hint { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; }
.probe-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
.probe-progress-bar { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--n-100, #eef0f4); overflow: hidden; }
.probe-progress-fill { height: 100%; width: 0; background: var(--accent-600, var(--accent)); transition: width 0.2s ease; }
.probe-progress-text { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.probe-text-input { width: 100%; max-width: 320px; }
.tform-submit { position: sticky; bottom: 12px; width: 100%; }

/* An element given the `hidden` attribute must actually hide. Any class that
   sets a display value outruns the attribute's default `display:none`, which is
   how the probe progress bar and the sticky submit button showed through before
   a timed probe had started. Scoped to the components that use `hidden` as
   state rather than applied globally. */
.probe-progress[hidden],
.probe-items[hidden],
.tform-submit[hidden],
.goalb-step[hidden],
.goalb-nav[hidden],
.goalb-rail[hidden],
.goalb-rail-step[hidden],
.goalb-direction-note[hidden],
.gbank-detail[hidden],
.gbank-more[hidden] { display: none !important; }

/* =============================================================
   Onboarding & reference refinements
   ============================================================= */

/* Related-services checkboxes on the Add Student form. Same vocabulary as the
   profile card, laid out to be scanned rather than read. */
.onboard-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; margin: 6px 0 8px; }
/* `.student-form label` stacks its parts in a column, which is right for a
   field but turns a checkbox into a box floating above its own text. Scoped
   with the form class so it outranks that rule instead of relying on order. */
.student-form .svc-check,
.svc-check {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  font-size: 13.5px; line-height: 1.4; cursor: pointer; padding: 3px 0;
}
.svc-check input { flex: 0 0 auto; margin: 0; }
.svc-check span { min-width: 0; }

/* The Related Services card leads with what the student actually receives, so
   the Reference section answers its question without being read twice. */
.svc-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 9px 11px; margin-bottom: 10px;
}
.svc-summary-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.svc-summary-list { display: flex; flex-wrap: wrap; gap: 5px; }
.svc-summary-item {
  font-size: 12px; font-weight: 600; background: var(--accent-50);
  color: var(--accent-700); border-radius: var(--radius-full); padding: 2px 9px;
}
.svc-summary-item.svc-summary-bip { background: var(--warning-bg); color: var(--warning-ink); }
.svc-summary-empty { display: block; font-size: 12.5px; font-weight: 400; }

/* A class is now just a class — no per-course grade, teacher or email row. */
.course-card-compact .course-card-header { margin-bottom: 0; }
.course-card-compact { padding-bottom: 10px; }

.tform-help { font-size: 12.5px; line-height: 1.5; margin: 2px 0 8px; }