/* ═══════════════════════════════════════════════════════════════
   GB-STYLES.CSS — Professional gradebook design system
   Redesigned for readability, clarity, and parent-friendly output
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Proficiency score colors — used across all pages */
  --score-0:  #bbb;     /* Not Assessed */
  --score-1:  #d32f2f;  /* Emerging */
  --score-2:  #c07a00;  /* Developing */
  --score-3:  #2e7d32;  /* Proficient */
  --score-4:  #1565c0;  /* Extending */

  /* Semantic tinted score badge backgrounds */
  --score-1-bg: #FEE2E2; --score-1-text: #991B1B;
  --score-2-bg: #FEF3C7; --score-2-text: #92400E;
  --score-3-bg: #BBF7D0; --score-3-text: #166534;
  --score-4-bg: #DBEAFE; --score-4-text: #1E40AF;

  /* Font stack */
  --font-base: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;

  /* Apple System Colors */
  --bg:             #f5f5f7;
  --bg-secondary:   #ececf0;
  --surface:        #ffffff;
  --surface-2:      #e5e5ea;
  --surface-glass:  rgba(255,255,255,0.82);
  --border:         #d1d1d6;
  --border-2:       #c7c7cc;
  --text:           #1d1d1f;
  --text-2:         #636366;
  --text-3:         #6E6E73;
  --active:         #007AFF;
  --active-light:   rgba(0,122,255,0.08);
  --late:           #FF9500;
  --priority:       #FF3B30;
  --priority-light: rgba(255,59,48,0.08);

  /* Toolbar */
  --toolbar-bg-start: #F6F6F6;
  --toolbar-bg-end: #ECECEC;

  /* Interactive states */
  --btn-hover-blue: #0066DD;
  --toggle-hover-dark: #1a1a2e;

  /* Status badges */
  --danger: #c62828;
  --iep-badge: #e08600;
  --mod-badge: #5856d6;

  /* Overlay / divider scale */
  --overlay-hover: rgba(0,0,0,0.04);
  --overlay-pressed: rgba(0,0,0,0.08);
  --divider-subtle: rgba(0,0,0,0.06);
  --divider-medium: rgba(0,0,0,0.09);
  --divider-strong: rgba(0,0,0,0.12);
  --divider-heavy: rgba(0,0,0,0.14);

  /* Accent / UI colors (used in assignments, reports, toasts) */
  --score-1-dark: #b71c1c;
  --score-2-dark: #a06800;
  --score-3-dark: #1b5e20;
  --score-4-dark: #0d47a1;
  --focus-banner-bg: #e8f0fe;
  --focus-banner-border: #c4d7f2;
  --section-hover: #f0ede4;
  --accent-purple: #7b1fa2;
  --accent-purple-light: rgba(142,68,173,0.10);
  --report-block-bg: #f5f3ef;
  --report-callout-bg: #fef9f0;
  --report-callout-border: #e8d5a8;
  --toast-error: #c0392b;
  --toast-success: #1a7a34;

  /* Elevation shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.04);

  /* ── Type Scale (Apple HIG-aligned) ──────────────────────── */
  --text-2xs: 0.625rem;   /* 10px — absolute minimum, micro labels */
  --text-xs: 0.6875rem;   /* 11px — Apple's stated minimum */
  --text-sm: 0.75rem;     /* 12px — secondary labels, badges */
  --text-base: 0.8125rem; /* 13px — standard UI text */
  --text-md: 0.875rem;    /* 14px — card titles, descriptions */
  --text-lg: 1rem;        /* 16px — section headings */
  --text-xl: 1.125rem;    /* 18px — page headings */
  --text-2xl: 1.5rem;     /* 24px — large display numbers */
  --text-3xl: 1.75rem;    /* 28px — hero stat values */
  --text-4xl: 2.25rem;    /* 36px — jumbo display */

  /* ── Spacing (4px grid) ──────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ── Animation ───────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-micro: 0.15s;
  --duration-fast: 0.25s;
  --duration-normal: 0.35s;

  /* ── Letter Spacing ──────────────────────────────────────── */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ── Layout ──────────────────────────────────────────────── */
  --dock-h:       52px;
  --toolbar-h:    52px;
  --sidebar-w:    240px;
}

/* ── Focus — Apple blue ring ────────────────────────────────── */
:focus-visible { outline: 2px solid var(--active); outline-offset: 2px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--active) !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.15) !important;
  outline: none;
}
/* Focus ring for custom interactive elements */
.gb-score:focus-visible, .score-val:focus-visible, .score-opt:focus-visible,
.gb-filter-chip:focus-visible, .gb-type-chip:focus-visible,
.tb-btn:focus-visible, .tb-action-btn:focus-visible, .tb-toggle-btn:focus-visible,
.tb-seg a:focus-visible, .student-row:focus-visible,
.dash-card:focus-visible, .hm-row:focus-visible,
.tag-select-item:focus-visible, .assess-header:focus-visible,
.rsg-level:focus-visible {
  outline: 2px solid var(--active);
  outline-offset: -1px;
}
/* Skip links — hidden until focused */
.skip-link {
  position: fixed; top: -100px; left: 16px; background: var(--active); color: #fff;
  padding: 8px 16px; z-index: 99999; font-size: var(--text-base); font-weight: 600;
  text-decoration: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  opacity: 0; pointer-events: none; transition: top 0.15s, opacity 0.15s;
}
.skip-link:focus { top: 8px; opacity: 1; pointer-events: auto; }

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-base);
  background: var(--bg); color: var(--text);
  font-size: var(--text-md); line-height: 1.5;
  padding-top: var(--dock-h); min-height: 100vh;
}

/* ── Unified Toolbar — macOS-native title bar + controls ───── */
#app-dock {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: var(--toolbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--divider-subtle);
  display: flex; align-items: center; padding: 0 16px;
}

/* Toolbar groups — left / center / right layout */
.tb-group { display: flex; align-items: center; gap: 2px; }
.tb-group.tb-left { flex-shrink: 0; }
.tb-group.tb-center { position: absolute; left: 50%; transform: translateX(-50%); }
.tb-group.tb-right { margin-left: auto; gap: 6px; }

/* ── User menu (sign-out) in toolbar ─────────────────────── */
.tb-user-menu { position: relative; margin-left: 4px; }
.tb-user-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer; font-family: var(--font-base);
  font-size: var(--text-sm); color: var(--text-2); transition: all 0.15s;
  white-space: nowrap; max-width: 180px;
}
.tb-user-btn:hover { border-color: var(--text-3); color: var(--text); }
.tb-user-name { overflow: hidden; text-overflow: ellipsis; }
.tb-user-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); min-width: 120px; z-index: 1000;
  padding: 4px;
}
.tb-user-menu.open .tb-user-dropdown { display: block; }
.tb-user-signout {
  display: block; width: 100%; padding: 7px 12px; text-align: left;
  font-family: var(--font-base); font-size: var(--text-sm); font-weight: 500;
  color: var(--priority); border: none; background: transparent;
  border-radius: 6px; cursor: pointer; transition: background 0.12s;
}
.tb-user-signout:hover { background: var(--priority-light); }

/* Toolbar separator */
.tb-sep { width: 0.5px; height: 20px; background: var(--divider-medium); margin: 0 6px; flex-shrink: 0; }

/* Toolbar icon buttons */
.tb-btn {
  width: 34px; height: 30px; border-radius: var(--radius-sm); border: none;
  background: transparent; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; color: var(--text-2);
  transition: background var(--duration-micro); flex-shrink: 0;
}
.tb-btn:hover { background: var(--divider-subtle); }
.tb-btn:active { background: var(--overlay-pressed); }
.tb-btn svg { pointer-events: none; }

/* Toolbar accent button — blue CTA used across pages */
.tb-action-btn {
  padding: 8px 16px; min-height: 32px; line-height: 1; font-family: var(--font-base); font-size: var(--text-base);
  font-weight: 600; border-radius: 8px; white-space: nowrap;
  background: var(--active); color: #fff; border: none;
  cursor: pointer; transition: all var(--duration-micro) var(--ease-out); text-decoration: none;
  display: inline-flex; align-items: center;
}
.tb-action-btn:hover { filter: brightness(0.92); box-shadow: 0 2px 8px rgba(0,122,255,0.25); }
.tb-action-btn:active { transform: scale(0.97); }
/* Toolbar toggle button — macOS-style pill toggle */
.tb-toggle-btn {
  padding: 4px 12px; min-height: 28px; line-height: 1; font-family: var(--font-base); font-size: var(--text-base);
  font-weight: 500; border-radius: var(--radius-sm); white-space: nowrap;
  background: transparent; color: var(--text-2); border: 1px solid var(--border);
  cursor: pointer; transition: all var(--duration-micro) var(--ease-out); display: inline-flex; align-items: center; gap: 5px;
}
.tb-toggle-btn:hover { background: var(--overlay-hover); color: var(--text); border-color: var(--text-3); }
.tb-toggle-btn.active { background: var(--text); color: #fff; border-color: var(--text); }
.tb-toggle-btn.active:hover { background: var(--toggle-hover-dark); }

/* Segmented control — macOS Finder-style view switcher */
.tb-seg {
  display: inline-flex; align-items: center;
  background: var(--divider-subtle); border-radius: var(--radius-sm);
  padding: 3px; gap: 2px;
}
.tb-seg a {
  padding: 6px 16px; border-radius: 6px; border: none;
  background: transparent; font-family: var(--font-base);
  font-size: var(--text-base); font-weight: 500; color: var(--text-3);
  cursor: pointer; white-space: nowrap; transition: all var(--duration-micro) ease;
  line-height: 1; text-decoration: none;
}
.tb-seg a:hover:not(.tb-seg-active) { color: var(--text); }
.tb-seg a.tb-seg-active {
  background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Legacy dock classes — hidden */
.dock-divider { display: none; }

/* ── Layout ─────────────────────────────────────────────────── */
.page-layout { display: flex; height: calc(100vh - var(--dock-h)); }

/* ── Sidebar ────────────────────────────────────────────────── */
#sidebar-mount { flex-shrink: 0; height: 100%; }
#gb-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--divider-subtle); display: flex;
  flex-direction: column; height: 100%; overflow: hidden;
}
#gb-sidebar-top { padding: 16px 16px 12px; border-bottom: 1px solid var(--divider-subtle); flex-shrink: 0; }
.sb-header-label {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-2xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-3); margin-bottom: 2px;
}
.sb-header-course { font-size: var(--text-md); font-weight: 600; color: var(--text); margin-bottom: 8px; }
#gb-course-select {
  width: 100%; font-family: var(--font-base); font-size: var(--text-base);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px;
  color: var(--text); outline: none; cursor: pointer; margin-bottom: 8px;
}
#gb-roster-search {
  width: 100%; font-family: var(--font-base); font-size: var(--text-base);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px;
  color: var(--text); outline: none;
}
#gb-roster-search:focus { border-color: var(--active); box-shadow: 0 0 0 3px rgba(0,122,255,0.1); }
#gb-roster-search::placeholder { color: var(--text-3); }
#gb-roster-list { flex: 1; overflow-y: auto; padding: 8px; }
.student-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  cursor: pointer; margin: 0; border-radius: var(--radius-sm);
  transition: background var(--duration-micro); text-decoration: none; color: inherit;
}
.student-row:hover { background: var(--overlay-hover); }
.student-row.selected { background: var(--active-light); }
.student-row.selected .student-row-name { color: var(--active); font-weight: 600; }
.student-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-2xs);
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.student-info { flex: 1; min-width: 0; }
.student-row-name { font-size: var(--text-base); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.student-row-sub { display: none; }
.student-row-prof {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  font-size: var(--text-xs); font-weight: 700; padding: 2px 8px;
  border-radius: var(--radius-xs); flex-shrink: 0;
}
#gb-sidebar-foot {
  padding: 8px 14px; border-top: 1px solid var(--divider-subtle);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
#gb-sidebar-foot button {
  font-family: var(--font-base); font-size: var(--text-xs); color: var(--text-2);
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 5px; transition: color var(--duration-micro);
}
#gb-sidebar-foot button:hover { color: var(--active); }
#gb-sidebar-foot .sb-count { font-size: var(--text-xs); color: var(--text-3); }
/* Legacy compat */
#gb-roster-count {
  padding: 5px 10px; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs);
  color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  border-top: 1px solid var(--border); flex-shrink: 0; display: none;
}

/* ── Collapsible sidebar ───────────────────────────────────── */
.page-layout.sidebar-hidden #sidebar-mount { width: 0; overflow: hidden; }
.page-layout.sidebar-hidden #sidebar-mount #gb-sidebar { display: none; }

.sidebar-toggle {
  display: none; /* Now handled by tb-btn in toolbar */
}
/* ── Main ───────────────────────────────────────────────────── */
.page-main { flex: 1; min-width: 0; overflow-y: auto; padding: 0; overscroll-behavior: contain; display: flex; flex-direction: column; }

/* ── Shared Student Header (student dashboard + term questionnaire) ── */
.student-header-top {
  display:flex; flex-direction:column; gap:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 24px 16px;
  margin-bottom:16px;
}
.sh-row1 { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.student-identity { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.student-avatar-xl {
  width:48px; height:48px; border-radius: var(--radius-lg); background:var(--text);
  color:#fff; font-family:'SF Mono',ui-monospace,'Menlo',monospace; font-size:var(--text-xl); font-weight:600;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 2px 8px rgba(26,26,46,0.15);
}
.student-identity-text { display:flex; flex-direction:column; gap:2px; }
.student-name-xl {
  font-family:var(--font-base); font-size:var(--text-2xl); font-weight:700;
  color:var(--text); line-height:1.2; letter-spacing: var(--tracking-tight);
}
.student-pronouns {
  font-family:'SF Mono',ui-monospace,'Menlo',monospace; font-size:var(--text-xs); color:var(--text-3);
  text-transform:uppercase; letter-spacing: var(--tracking-wide);
}
.sh-spacer { flex:1; }
.sh-stats { display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.sh-stat {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px 12px; min-width:60px;
}
.sh-stat + .sh-stat { border-left:1px solid var(--divider-subtle); }
.sh-stat-val { font-family:var(--font-base); font-size:var(--text-2xl); font-weight:700; line-height:1.1; }
.sh-stat-label {
  font-family:'SF Mono',ui-monospace,monospace; font-size:var(--text-2xs); font-weight:500;
  text-transform:uppercase; letter-spacing: var(--tracking-wide); color:var(--text-3); margin-top:2px;
}
.sh-row2 {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--divider-subtle);
}
.sh-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius: var(--radius-xl);
  font-family:'SF Mono',ui-monospace,monospace; font-size:var(--text-xs); font-weight:500;
  color:var(--text-2); background:var(--overlay-hover); letter-spacing: var(--tracking-wide);
}
.sh-chip-icon { font-style:normal; }
.sh-chip-desig { background:rgba(0,122,255,0.08); color:var(--active); font-weight:600; }
.sh-chip-desig.low-inc { background:rgba(255,59,48,0.08); color:var(--priority); }
.sh-chip-iep { background:rgba(255,149,0,0.1); color:var(--iep-badge); font-weight:600; }
.sh-chip-mod { background:rgba(88,86,214,0.1); color:var(--mod-badge); font-weight:600; }
.overall-card { display:flex; align-items:center; gap:10px; border-radius:var(--radius); padding:8px 18px; flex-shrink:0; }
.overall-val { font-family:var(--font-base); font-size:var(--text-3xl); font-weight:700; line-height:1; }
.overall-word { font-family:var(--font-base); font-size:var(--text-base); font-weight:600; text-transform:uppercase; letter-spacing: var(--tracking-wide); }
.page-toggle-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius: var(--radius);
  font-family:var(--font-base);
  font-size:var(--text-base); font-weight:600; letter-spacing:0.01em;
  background:var(--active); color:#fff; border:none;
  cursor:pointer; transition:all var(--duration-micro);
  box-shadow:0 1px 4px rgba(0,122,255,0.12);
  text-decoration:none; flex-shrink:0;
}
.page-toggle-btn:hover { filter: brightness(0.92); box-shadow:0 2px 8px rgba(0,122,255,0.25); }
.page-toggle-btn:active { transform:scale(0.97); }

/* ── Letter grade card (shared, used by renderStudentHeader) ── */
.letter-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:var(--radius); padding:8px 16px;
  background:var(--surface); flex-shrink:0;
  border:1px solid var(--border);
}
.letter-val {
  font-family:var(--font-base); font-size:var(--text-3xl); font-weight:700; line-height:1;
}
.letter-pct {
  font-family:'SF Mono', ui-monospace, 'Menlo', monospace; font-size:var(--text-xs); color:var(--text-2);
}

/* ── Proficiency badges ─────────────────────────────────────── */
.prof-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-weight: 700; color: #fff; border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.prof-sm { width: 24px; height: 24px; font-size: var(--text-xs); }
.prof-md { width: 32px; height: 32px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.prof-lg { width: 44px; height: 44px; font-size: var(--text-lg); border-radius: var(--radius); }
.prof-0 { background: var(--score-0); color: var(--text-3); }
.prof-1 { background: var(--score-1); }
.prof-2 { background: var(--score-2); }
.prof-3 { background: var(--score-3); }
.prof-4 { background: var(--score-4); }

/* Label-style proficiency badges (text instead of number) */
.prof-label {
  display: inline-block; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-weight: 600;
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 3px 8px; border-radius: var(--radius-sm); color: #fff;
}

/* ── Prof bar ───────────────────────────────────────────────── */
.prof-bar { height: 6px; background: var(--surface-2); border-radius: var(--radius-xs); overflow: hidden; }
.prof-bar-fill { height: 100%; border-radius: var(--radius-xs); transition: width 0.3s; }

/* ── Section label ──────────────────────────────────────────── */
.section-label {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-3); margin-bottom: 8px; margin-top: 18px;
}
.section-label:first-child { margin-top: 0; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--overlay-hover);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.card-title {
  font-family: var(--font-base); font-size: var(--text-md); font-weight: 600; color: var(--text);
}

/* ── Heatmap ────────────────────────────────────────────────── */
.hm-table {
  width: 100%; border-collapse: separate; border-spacing: 0 4px;
  table-layout: fixed;
}
.hm-table colgroup col:first-child { width: 200px; }
.hm-row {
  background: var(--surface); border-radius: var(--radius);
  cursor: pointer; transition: box-shadow var(--duration-fast), background var(--duration-fast);
  box-shadow: none;
}
.hm-row:hover { box-shadow: var(--shadow-sm); background: rgba(0,122,255,0.02); }
.hm-name-cell {
  padding: 4px 10px; border-radius: var(--radius) 0 0 var(--radius);
  position: sticky; left: 0; z-index: 2;
  background: inherit; display: flex; align-items: center; gap: 4px;
}
.hm-flag-btn {
  background: none; border: none; cursor: pointer; font-size: var(--text-xl);
  padding: 4px 6px; line-height: 1; border-radius: var(--radius-sm); flex-shrink: 0;
  transition: background var(--duration-micro);
}
.hm-flag-btn:hover { background: var(--divider-subtle); }
.hm-name-link {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
  min-width: 0;
}
.hm-student-name {
  font-size: var(--text-xl); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-section-cell {
  text-align: center; padding: 4px 6px; position: relative;
}
.hm-section-val {
  font-family: var(--font-base); font-size: var(--text-3xl);
  font-weight: 600; line-height: 1;
}
.hm-section-label {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-2xs);
  text-transform: uppercase; color: var(--text-3); margin-top: 1px;
}
.hm-section-trend {
  font-size: var(--text-sm); position: absolute; top: 2px; right: 4px;
}
.hm-overall-cell {
  text-align: center; padding: 4px 8px;
  border-right: 2px solid var(--border);
}
.hm-overall-val {
  font-family: var(--font-base); font-size: var(--text-4xl);
  font-weight: 700; line-height: 1;
}
.hm-overall-label {
  font-family: var(--font-base); font-size: var(--text-sm);
  text-transform: uppercase; color: var(--text-2); margin-top: 1px;
  font-weight: 600; letter-spacing: var(--tracking-wide);
}
.hm-header-cell {
  text-align: center; padding: 8px 4px;
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 700;
}
.hm-header-cell:first-child {
  position: sticky; left: 0; z-index: 3; background: var(--bg);
}
.hm-low-evidence { border: 1px dashed var(--border-2); }
.hm-section-cell:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

/* ── Heatmap row actions (edit/delete) ─────────────────────── */
.hm-row-actions { opacity:0; transition:opacity var(--duration-micro); display:inline-flex; gap:2px; margin-left:6px; }
.hm-row:hover .hm-row-actions { opacity:1; }
.hm-row-actions button { background:none; border:none; cursor:pointer; font-size:var(--text-sm); padding:2px 4px; border-radius: var(--radius-xs); color:var(--text-3); }
.hm-row-actions button:hover { background:var(--divider-subtle); color:var(--text); }
.hm-row-actions button:last-child:hover { color:var(--danger); background:rgba(198,40,40,0.08); }

/* ── Focus areas callout ───────────────────────────────────── */
.focus-callout {
  background: var(--priority-light); border: 1px solid rgba(198,40,40,0.2);
  border-left: 4px solid var(--priority); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px;
}
.focus-callout-title {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--priority);
  margin-bottom: 8px; font-weight: 600;
}
.focus-callout-item {
  font-size: var(--text-md); color: var(--text); padding: 3px 0;
  display: flex; align-items: center; gap: 8px;
}

/* ── Stats dashboard ───────────────────────────────────────── */
.stats-row {
  display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--overlay-hover);
  border-radius: var(--radius); padding: 14px 20px; text-align: center;
  min-width: 100px; box-shadow: var(--shadow-sm);
}
.stat-card-accent { border-top: 3px solid; }
.stat-val {
  font-family: var(--font-base); font-weight: 600; line-height: 1;
}
.stat-label {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-2xs);
  text-transform: uppercase; color: var(--text-3); margin-top: 4px;
}

/* Completion ring */
.completion-ring {
  width: 56px; height: 56px; position: relative; margin: 0 auto 4px;
}
.completion-ring svg { transform: rotate(-90deg); }
.completion-ring-text {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  font-size: var(--text-sm); font-weight: 700;
}

/* ── Dashboard section blocks ───────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.dash-section {
  background: var(--surface); border: 1px solid var(--overlay-hover);
  border-radius: var(--radius); padding: 16px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.dash-section-stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.dash-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.dash-section-title {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600; color: var(--text);
}
.dash-section-subject {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-3);
}
.dash-tag-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--overlay-hover); font-size: var(--text-base);
  cursor: pointer;
}
.dash-tag-row:last-child { border-bottom: none; }
.dash-tag-row:hover { background: var(--overlay-hover); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--radius-sm); }
.dash-tag-label { flex: 1; min-width: 0; font-size: var(--text-base); color: var(--text); }
.dash-tag-bar { width: 100px; flex-shrink: 0; }
.dash-tag-evidence {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs); color: var(--text-3);
  width: 24px; text-align: center; flex-shrink: 0;
}

/* ── Tag detail dropdown ───────────────────────────────────── */
.tag-detail { display: none; padding: 4px 0 8px 34px; }
.dash-tag-row.open + .tag-detail { display: block; }
.tag-assess-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: var(--text-sm); flex-wrap: wrap; }
.tag-assess-title { color: var(--text); font-weight: 500; }
.tag-assess-prof { font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs); font-weight: 600; }
.tag-assess-date { font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs); color: var(--text-3); flex-shrink: 0; }

/* ── Growth Sparkline ──────────────────────────────────────── */
.growth-sparkline {
  display: flex; align-items: center; gap: 0; padding: 4px 0;
}
.sparkline-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  display: inline-block; cursor: default; position: relative; z-index: 1;
}
.sparkline-line {
  width: 16px; height: 2px; background: var(--border-2); flex-shrink: 0;
}

/* ── Goals & Reflections in section cards ─────────────────── */
.section-goal, .section-reflection {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.section-goal-label, .section-reflection-label {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-3); margin-bottom: 3px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.section-goal-text, .section-reflection-text {
  font-size: var(--text-base); color: var(--text); line-height: 1.45; font-style: italic;
}
.section-goal-text:empty::before, .section-reflection-text:empty::before {
  content: 'Not set'; color: var(--text-3); font-style: italic;
}
.confidence-badge {
  display: inline-block; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs);
  font-weight: 600; padding: 1px 6px; border-radius: var(--radius-xs); color: #fff;
}
.edit-btn-inline {
  font-size: var(--text-sm); color: var(--active); cursor: pointer; border: none;
  background: none; padding: 0 4px; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.edit-btn-inline:hover { color: var(--text); text-decoration: underline; }
.inline-edit-area {
  margin-top: 4px; display: flex; flex-direction: column; gap: 4px;
}
.inline-edit-area textarea {
  width: 100%; font-family: var(--font-base); font-size: var(--text-base);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 8px; resize: none; min-height: 50px; outline: none;
}
.inline-edit-area textarea:focus { border-color: var(--active); }
.inline-edit-area select {
  font-family: var(--font-base); font-size: var(--text-base);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 8px; outline: none; width: auto;
}
.inline-edit-actions {
  display: flex; gap: 6px; align-items: center;
}
.inline-edit-actions .btn { font-size: var(--text-sm); padding: 3px 10px; }

/* ── Report goal/reflection rows ──────────────────────────── */
.report-goal-row, .report-reflection-row {
  padding: 10px 14px; font-size: var(--text-md); color: var(--text);
  background: var(--bg); border-bottom: 1px solid var(--divider-subtle); line-height: 1.55;
}
.report-goal-row strong, .report-reflection-row strong {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-sm); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-3); margin-right: 8px;
}
.report-completion-statement {
  font-size: var(--text-md); color: var(--text-2); margin: 20px 0;
  padding: 12px 18px; background: var(--bg); border-radius: var(--radius-sm);
  border-left: 3px solid var(--active); line-height: 1.5;
  font-family: var(--font-base);
}

/* ── Student header ─────────────────────────────────────────── */
.student-header {
  display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px;
}
.student-avatar-lg {
  width: 48px; height: 48px; border-radius: 14px; background: var(--active);
  color: #fff; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xl); font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.student-name-lg { font-family: var(--font-base); font-size: var(--text-2xl); font-weight: 600; color: var(--text); line-height: 1.2; }
.student-sub-lg { font-size: var(--text-md); color: var(--text-2); }

/* ── Evidence list ──────────────────────────────────────────── */
.evidence-accordion { border-bottom: 1px solid var(--border); }
.evidence-accordion-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  cursor: pointer; font-size: var(--text-md); font-weight: 500;
}
.evidence-accordion-header:hover { color: var(--active); }
.evidence-accordion-body { display: none; padding: 0 0 10px 8px; }
.evidence-accordion.open .evidence-accordion-body { display: block; }
.evidence-accordion-chevron { font-size: var(--text-xs); color: var(--text-3); transition: transform var(--duration-micro); width: 12px; }
.evidence-accordion.open .evidence-accordion-chevron { transform: rotate(90deg); }

/* ── Teacher notes ──────────────────────────────────────────── */
.note-add textarea {
  width: 100%; font-family: var(--font-base); font-size: var(--text-md);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; resize: none; min-height: 70px; outline: none; margin-bottom: 6px;
}
.note-add textarea:focus { border-color: var(--active); }
.note-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 6px;
}
.note-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.note-date { font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs); color: var(--text-3); text-transform: uppercase; }
.note-delete { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: var(--text-sm); }
.note-delete:hover { color: var(--priority); }
.note-body { font-size: var(--text-md); color: var(--text); line-height: 1.5; outline: none; }
.note-body:focus { background: var(--active-light); padding: 3px; margin: -3px; border-radius: var(--radius-xs); }

/* ── Assessment badges ──────────────────────────────────────── */
.type-badge {
  display: inline-block; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs);
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-xl);
}
.type-badge-s { background: var(--active); color: #fff; }
.type-badge-f { background: var(--surface-2); color: var(--text-2); }

/* ── Tags ───────────────────────────────────────────────────── */
.tag-chip {
  display: inline-block; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 2px 7px;
  border-radius: var(--radius-xl); margin-right: 3px; margin-bottom: 3px;
  background: var(--surface-2); color: var(--text-2);
}

/* ── Buttons — 3-tier system ────────────────────────────────── */
.btn {
  font-family: inherit; font-size: var(--text-base); font-weight: 500;
  border-radius: var(--radius-sm); padding: 8px 16px; min-height: 32px; line-height: 1;
  cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
  border: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
/* Primary — filled blue */
.btn-primary { background: var(--active); color: #fff; }
.btn-primary:hover { filter: brightness(0.92); }
/* Secondary — subtle fill */
.btn-ghost { background: var(--divider-subtle); border: none; color: var(--text); padding: 8px 16px; min-height: 32px; line-height: 1; }
.btn-ghost:hover { background: var(--overlay-hover); }
/* Destructive — text-only red */
.btn-danger { background: none; border: none; color: var(--priority); font-weight: 500; padding: 8px 16px; min-height: 32px; line-height: 1; }
.btn-danger:hover { filter: brightness(0.92); }
.btn-back { font-family: inherit; font-size: var(--text-base); color: var(--text-3); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; }
.btn-back:hover { color: var(--active); }

/* ── Spreadsheet ────────────────────────────────────────────── */
.gb-table { border-collapse: collapse; width: 100%; }
.gb-table th, .gb-table td { padding: 0; }
.gb-name {
  position: sticky; left: 0; z-index: 2; background: var(--bg);
  padding: 10px 14px; font-size: var(--text-md); font-weight: 500;
  border-bottom: 1px solid var(--border); white-space: nowrap; min-width: 160px;
}
.gb-name a { color: var(--text); text-decoration: none; }
.gb-name a:hover { color: var(--active); }
/* Assessment group header */
.gb-assess-group {
  text-align: center; padding: 8px 6px; font-weight: 700;
  font-family: var(--font-base); font-size: var(--text-base);
  border-bottom: 1px solid var(--border); color: var(--text);
  background: var(--surface);
}
.gb-assess-type {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-2xs); font-weight: 600;
  text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius); margin-left: 6px;
}
.gb-assess-type-s { background: var(--active); color: #fff; }
.gb-assess-type-f { background: var(--surface-2); color: var(--text-2); }
/* Tag sub-header */
.gb-tag-header {
  text-align: center; padding: 6px 8px;
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs); font-weight: 600;
  color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  border-bottom: 2px solid var(--border); background: var(--bg);
  min-width: 60px;
}
/* Score cell */
.gb-score {
  text-align: center; padding: 5px 3px; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none; transition: background 0.1s; min-width: 60px;
}
.gb-score:hover { background: rgba(0,122,255,0.04); }
.gb-score-val {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 30px; border-radius: var(--radius-sm);
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-base); font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.gb-score-val.s0 { background: transparent; color: var(--text-3); }
.gb-score-val.s1 { background: var(--score-1); }
.gb-score-val.s2 { background: var(--score-2); }
.gb-score-val.s3 { background: var(--score-3); }
.gb-score-val.s4 { background: var(--score-4); }

/* ── Points-mode cells: traditional gradebook ────────────── */
.gb-score-pts { min-width: 68px; }
.gb-pts-display {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 2px 0;
}
.gb-pts-score {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  font-size: var(--text-base); font-weight: 700; color: var(--text);
  line-height: 1.1;
}
.gb-pts-max {
  font-weight: 400; color: var(--text-3); font-size: var(--text-sm);
}
.gb-pts-pct {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  font-size: var(--text-xs); color: var(--text-3); font-weight: 500;
  line-height: 1;
}
.gb-pts-empty {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  color: var(--text-3); font-size: var(--text-base);
}
.gb-pts-input-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 2px 0;
}
.gb-pts-input {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  width: 48px; font-size: var(--text-base); font-weight: 700;
  text-align: center; color: var(--text);
  border: none; border-bottom: 1.5px solid var(--active);
  background: transparent; outline: none;
  padding: 0 0 1px; line-height: 1.1;
  -moz-appearance: textfield;
}
.gb-pts-input:focus { border-bottom-color: var(--active); box-shadow: none !important; border-color: transparent !important; border-bottom-color: var(--active) !important; outline: none; }
.gb-pts-input:disabled { opacity: 0.35; border-bottom-color: var(--text-3); cursor: not-allowed; }
.score-row.has-status .pts-input-cell .gb-pts-max,
.score-row.has-status .pts-pct-cell .gb-pts-live-pct { opacity: 0.35; }
.gb-pts-input::-webkit-outer-spin-button,
.gb-pts-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gb-pts-live-pct {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  font-size: var(--text-xs); color: var(--active); font-weight: 600;
  line-height: 1; min-height: 0.58rem;
}

/* ── Points grid on assignments page ────────────────────── */
.pts-grid .score-grid-header { display: grid; grid-template-columns: 1fr 120px 50px 32px; align-items: end; }
.pts-grid .score-row { display: grid; grid-template-columns: 1fr 120px 50px 32px; align-items: center; }
.pts-input-cell {
  display: flex; align-items: center; gap: 4px; justify-content: center;
}
.pts-input-cell .gb-pts-input {
  width: 56px; font-size: var(--text-md); padding: 4px 0 3px;
}
.pts-input-cell .gb-pts-max {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  font-size: var(--text-base); color: var(--text-3); font-weight: 400;
}
.pts-pct-cell { text-align: center; }
.pts-pct-cell .gb-pts-live-pct {
  font-size: var(--text-base); min-height: auto;
}
.pts-bulk-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--border);
}
.pts-bulk-bar .gb-pts-input { width: 60px; font-size: var(--text-md); padding: 4px 0 3px; }
.pts-bulk-bar .gb-pts-max {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
  font-size: var(--text-base); color: var(--text-3);
}

.gb-group-start { border-left: 3px solid var(--border-2); padding-left: 6px; }
.gb-summary {
  text-align: center; padding: 8px 6px; border-bottom: 1px solid var(--border);
  background: var(--surface); min-width: 70px;
}
.gb-summary-header {
  text-align: center; padding: 8px 6px; background: var(--surface);
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-wide); border-bottom: 2px solid var(--border);
  min-width: 70px;
}
.gb-summary-val {
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-md); font-weight: 700;
}
.gb-corner { position: sticky; left: 0; z-index: 3; background: var(--bg); }
/* Row banding for readability */
.gb-table tbody tr:nth-child(even) td { background-color: var(--overlay-hover); }
.gb-table tbody tr:nth-child(even) td.gb-name, .gb-table tbody tr:nth-child(even) th.gb-name { background-color: var(--bg); }
.gb-table tbody tr:nth-child(even) td.gb-summary { background-color: var(--surface); }
.gb-table tbody tr:hover td { background-color: var(--active-light) !important; }
.gb-table tbody tr:hover td.gb-name, .gb-table tbody tr:hover th.gb-name { background-color: var(--active-light) !important; }
.gb-table tbody tr:hover td.gb-overall-col { background-color: var(--active-light) !important; }
.gb-table tbody tr:hover td.gb-summary { background-color: var(--overlay-hover) !important; }

/* ── Form elements ──────────────────────────────────────────── */
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-3); margin-bottom: 3px; }
.form-input { width: 100%; font-family: var(--font-base); font-size: var(--text-md); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text); outline: none; }
.form-input:focus { border-color: var(--active); }
.tag-select-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-select-item { display: flex; align-items: center; gap: 4px; font-size: var(--text-base); cursor: pointer; padding: 3px 8px; border-radius: var(--radius-xl); border: 1px solid var(--border); transition: all var(--duration-micro); }
.tag-select-item:hover { border-color: var(--active); }
.tag-select-item.checked { background: var(--text); border-color: var(--text); color: #fff; }
.tag-select-item.checked span { color: #fff !important; }
.tag-select-item.checked::before { content: '\2713 '; font-weight: 700; margin-right: 2px; }
.tag-select-item input { display: none; }

/* ── Settings ───────────────────────────────────────────────── */
.settings-card { background: var(--surface); border: 1px solid var(--overlay-hover); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.settings-title { font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-3); margin-bottom: 10px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.settings-row label { font-size: var(--text-md); color: var(--text); }

/* Collapsible Advanced section */
.advanced-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 16px;
  font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-3);
  background: transparent; border: none; cursor: pointer; transition: color var(--duration-micro);
  text-align: left;
}
.advanced-toggle:hover { color: var(--text-2); }
.advanced-chevron {
  display: inline-block; transition: transform 0.2s ease; font-size: var(--text-xs);
}
.advanced-chevron.open { transform: rotate(90deg); }
.advanced-body { border-top: 0.5px solid var(--divider-subtle); }

/* ── Assessment cards (settings page) ──────────────────────── */
.assess-card { background: var(--surface); border: 1px solid var(--overlay-hover); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.assess-card.active { border-color: var(--active); }
.assess-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; transition: background 0.1s; }
.assess-header:hover { background: rgba(0,122,255,0.03); }
.assess-title { font-size: var(--text-md); font-weight: 600; color: var(--text); flex: 1; }
.assess-date { font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-sm); color: var(--text-3); }
.assess-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border); }
.assess-card.open .assess-body { display: block; }
.assess-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.score-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--overlay-hover); }
.score-row:last-child { border-bottom: none; }
.score-name { width: 130px; font-size: var(--text-md); font-weight: 500; flex-shrink: 0; }
.score-tags { display: flex; gap: 3px; flex: 1; flex-wrap: wrap; }
.score-tag-cell { display: flex; align-items: center; gap: 4px; min-width: 80px; }
.score-tag-label { font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-2xs); color: var(--text-3); text-transform: uppercase; width: 28px; flex-shrink: 0; }
.score-val { width: 32px; height: 28px; border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-base); font-weight: 700; color: #fff; cursor: pointer; user-select: none; transition: all 0.1s; }
.score-val:hover { opacity: 0.8; }
.score-val.s0 { background: var(--surface-2); color: var(--text-3); }
.score-val.s1 { background: var(--score-1); }
.score-val.s2 { background: var(--score-2); }
.score-val.s3 { background: var(--score-3); }
.score-val.s4 { background: var(--score-4); }
.assess-actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ── Report tables ──────────────────────────────────────────── */
.report-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.report-table th, .report-table td { padding: 6px 8px; border: 1px solid var(--border); font-size: var(--text-base); text-align: left; }
.report-table th { background: var(--surface); font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-sm); text-transform: uppercase; color: var(--text-2); }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--surface); border-radius: var(--radius-lg); padding: 24px; max-width: 400px; width: 90%; box-shadow: var(--shadow-lg); }

/* ── Assessment title links ─────────────────────────────────── */
.gb-assess-group a:hover, .tag-assess-title:hover,
.evidence-accordion-header a:hover {
  text-decoration: underline; color: var(--active) !important;
}

.module-badge {
  display:inline-block; font-family:'SF Mono', ui-monospace, 'Menlo', monospace; font-size:var(--text-2xs);
  text-transform:uppercase; letter-spacing: var(--tracking-wide); padding:1px 7px;
  border-radius: var(--radius); color:#fff; font-weight:600; margin-left:6px;
}

/* ── Learning Outcomes Editor ──────────────────────────────── */
.lo-section-row {
  border:1px solid var(--border); border-radius:var(--radius-sm);
  margin-bottom:8px; overflow:hidden;
}
.lo-section-header {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  cursor:pointer; border-left:4px solid var(--border); transition:background 0.1s;
}
.lo-section-header:hover { background:var(--overlay-hover); }
.lo-section-chevron {
  font-size:var(--text-xs); color:var(--text-3); transition:transform var(--duration-micro);
  width:14px; flex-shrink:0; text-align:center;
}
.lo-section-row.open .lo-section-chevron { transform:rotate(90deg); }
.lo-section-name-input {
  flex:1; font-family:var(--font-base); font-size:var(--text-base); font-weight:600;
  border:1px solid transparent; border-radius: var(--radius-xs); padding:2px 5px;
  background:transparent; outline:none; color:var(--text);
}
.lo-section-name-input:hover { border-color:var(--border); }
.lo-section-name-input:focus { border-color:var(--active); background:var(--surface); }
.lo-section-count {
  font-family:'SF Mono', ui-monospace, 'Menlo', monospace; font-size:var(--text-2xs); color:var(--text-3);
  text-transform:uppercase; flex-shrink:0;
}
.lo-section-delete {
  width:22px; height:22px; border:none; background:none; cursor:pointer;
  color:var(--text-3); font-size:var(--text-sm); border-radius: var(--radius-xs);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.lo-section-delete:hover { color:var(--priority); background:var(--priority-light); }
.lo-section-body { display:none; border-top:1px solid var(--border); }
.lo-section-row.open .lo-section-body { display:block; }
.lo-tag-row {
  display:flex; align-items:center; gap:6px; padding:6px 10px 6px 18px;
  border-bottom:1px solid var(--overlay-hover); font-size:var(--text-base);
}
.lo-tag-row:last-child { border-bottom:none; }
.lo-tag-id {
  font-family:'SF Mono', ui-monospace, 'Menlo', monospace; font-size:var(--text-sm); font-weight:600;
  width:36px; flex-shrink:0; text-transform:uppercase; color:var(--text-2);
}
.lo-tag-label-input {
  flex:1; font-family:var(--font-base); font-size:var(--text-base);
  border:1px solid transparent; border-radius: var(--radius-xs); padding:2px 5px;
  background:transparent; outline:none; color:var(--text);
}
.lo-tag-label-input:hover { border-color:var(--border); }
.lo-tag-label-input:focus { border-color:var(--active); background:var(--surface); }
.lo-tag-delete {
  width:20px; height:20px; border:none; background:none; cursor:pointer;
  color:var(--text-3); font-size:var(--text-sm); border-radius: var(--radius-xs);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.lo-tag-delete:hover { color:var(--priority); }
.lo-tag-text-input {
  flex-basis:100%; margin-top:2px; margin-left:42px; font-family:var(--font-base);
  font-size:var(--text-sm); line-height:1.4; color:var(--text-2); border:1px solid transparent;
  border-radius: var(--radius-xs); padding:3px 6px; background:var(--overlay-hover);
  outline:none; resize:none; min-height:28px; box-sizing:border-box;
  width:calc(100% - 42px);
}
.lo-tag-text-input:hover { border-color:var(--border); }
.lo-tag-text-input:focus { border-color:var(--active); background:var(--surface); }
.lo-add-btn {
  font-family:'SF Mono', ui-monospace, 'Menlo', monospace; font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing: var(--tracking-wide); background:none; border:1px dashed var(--border-2);
  border-radius:var(--radius-sm); padding:5px 12px; cursor:pointer;
  color:var(--text-3); transition:all 0.1s; margin:6px 10px;
}
.lo-add-btn:hover { border-color:var(--active); color:var(--active); }
.lo-reset-btn {
  font-family:'SF Mono', ui-monospace, 'Menlo', monospace; font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing: var(--tracking-wide); background:none; border:1px solid var(--border-2);
  border-radius:var(--radius-sm); padding:5px 12px; cursor:pointer;
  color:var(--text-3); transition:all 0.1s; margin-top:8px;
}
.lo-reset-btn:hover { border-color:var(--priority); color:var(--priority); }

/* ── Section color picker (inline in Add Section button) ─── */
.lo-add-btn.lo-picking-color {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:6px 14px; border-style:solid; border-color:var(--border);
  cursor:default;
}
.lo-color-swatch {
  width:22px; height:22px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; transition:all var(--duration-micro); flex-shrink:0; padding:0;
}
.lo-color-swatch:hover { transform:scale(1.25); border-color:rgba(255,255,255,0.6); box-shadow:0 0 0 2px rgba(0,0,0,0.15); }

/* ── Empty States ──────────────────────────────────────────── */
.empty-state {
  text-align:center; padding:60px 20px; color:var(--text-3);
}
.empty-state-icon { font-size:var(--text-4xl); margin-bottom:12px; opacity:0.5; }
.empty-state-title {
  font-family:var(--font-base); font-size:var(--text-xl); font-weight:600;
  color:var(--text-2); margin-bottom:6px;
}
.empty-state-text {
  font-family:var(--font-base); font-size:var(--text-md); max-width:360px;
  margin:0 auto; line-height:1.5;
}

/* ── Undo toast ─────────────────────────────────────────────── */
.undo-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--text); color:#fff; font-family:var(--font-base); font-size:var(--text-md);
  padding:10px 20px; border-radius:var(--radius); display:flex; align-items:center; gap:12px;
  box-shadow:0 4px 20px rgba(0,0,0,0.25); z-index:10001;
  animation:toast-in 0.2s ease-out;
}
.undo-toast-btn {
  background:none; border:1px solid rgba(255,255,255,0.3); color:#fff;
  font-family:var(--font-base); font-size:var(--text-base); font-weight:600;
  padding:4px 12px; border-radius: var(--radius-xs); cursor:pointer; transition:all 0.1s;
}
.undo-toast-btn:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.5); }
@keyframes toast-in {
  from { opacity:0; transform:translateX(-50%) translateY(12px) scale(0.96); }
  to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

/* ── Sync toast ────────────────────────────────────────────── */
.sync-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  color:#fff; font-family:var(--font-base); font-size:var(--text-md);
  padding:10px 20px; border-radius:var(--radius); display:flex; align-items:center; gap:12px;
  box-shadow:0 4px 20px rgba(0,0,0,0.25); z-index:10001;
  animation:toast-in 0.2s ease-out;
}
.sync-toast.error { background:var(--toast-error); }
.sync-toast.success { background:var(--toast-success); }
.sync-toast-btn {
  background:none; border:1px solid rgba(255,255,255,0.3); color:#fff;
  font-family:var(--font-base); font-size:var(--text-base); font-weight:600;
  padding:4px 12px; border-radius:var(--radius-xs); cursor:pointer; transition:all 0.1s;
}
.sync-toast-btn:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.5); }

/* ── Confirm modal ─────────────────────────────────────────── */
.confirm-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:10002;
  display:flex; align-items:center; justify-content:center;
  animation:fade-in var(--duration-normal) ease-out;
}
.confirm-card {
  background:var(--surface); border-radius:var(--radius-lg); padding:24px 28px; max-width:380px; width:90%;
  box-shadow: var(--shadow-lg);
  animation: slide-up var(--duration-normal) var(--ease-spring);
}
.confirm-title {
  font-family:var(--font-base); font-size:var(--text-lg); font-weight:600;
  color:var(--text); margin-bottom:8px;
}
.confirm-message {
  font-family:var(--font-base); font-size:var(--text-md); color:var(--text-2);
  line-height:1.5; margin-bottom:20px;
}
.confirm-actions {
  display:flex; gap:8px; justify-content:flex-end;
}
.confirm-cancel {
  font-family:var(--font-base); font-size:var(--text-base); font-weight:500;
  padding:8px 16px; border-radius: var(--radius-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--text-2); cursor:pointer;
}
.confirm-cancel:hover { background:var(--surface); }
.confirm-ok {
  font-family:var(--font-base); font-size:var(--text-base); font-weight:600;
  padding:8px 16px; border-radius: var(--radius-sm); border:none; cursor:pointer;
}
.confirm-ok.danger { background:var(--danger); color:#fff; }
.confirm-ok.danger:hover { filter: brightness(0.85); }
.confirm-ok.primary { background:var(--active); color:#fff; }
.confirm-ok.primary:hover { filter: brightness(0.85); }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes slide-up {
  from { opacity:0; transform:translateY(12px) scale(0.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Heatmap row "View" affordance ─────────────────────────── */
.hm-row-view {
  opacity: 0; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; font-size: var(--text-xs);
  color: var(--active); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  transition: opacity var(--duration-micro); white-space: nowrap;
}
.hm-row:hover .hm-row-view { opacity: 1; }

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  #app-dock, #gb-sidebar, .no-print { display: none !important; }
  .page-layout { height: auto; }
  .page-main { overflow: visible; padding: 0; }
  body { padding-top: 0; background: var(--surface); }
}

/* ── Responsive: Tablet (≤1200px) ─────────────────────────── */
@media (max-width: 1200px) {
  :root { --sidebar-w: 180px; }
}

/* ── Responsive: Small Tablet (≤1024px) ───────────────────── */
@media (max-width: 1024px) {
  .page-layout { --sidebar-w: 0px; }
  #gb-sidebar { display: none; }
  .sidebar-toggle { display: flex !important; }
  .page-main { padding: 16px; }
}

/* ── Responsive: Mobile (≤768px) ──────────────────────────── */
@media (max-width: 768px) {
  :root { --dock-h: 48px; }
  #app-dock { height: 48px; padding: 0 4px; }
  .dock-icon { padding: 4px 8px 3px; flex: 0 1 80px; min-height: 44px; }
  .dock-label { font-size: var(--text-2xs); }
  .dock-glyph { font-size: var(--text-lg); }

  .page-main { padding: 12px 10px; }

  /* Heatmap: make horizontally scrollable */
  .hm-table { font-size: var(--text-base); }
  .hm-name-cell { min-width: 140px; }
  .hm-section-val { font-size: var(--text-2xl); }
  .hm-overall-val { font-size: var(--text-3xl); }

  /* Score grid: horizontally scrollable with sticky names */
  .score-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .score-name { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 100px; }

  /* Buttons: larger touch targets */
  .btn, .btn-primary, .btn-ghost, .btn-danger { min-height: 44px; padding: 8px 16px; }
  .score-opt { min-width: 32px; min-height: 32px; font-size: var(--text-base); }

  /* Confirm modal: full-width on mobile */
  .confirm-card { max-width: 95%; padding: 20px; }

  /* Student stats bar: wrap on mobile */
  .student-stats-bar { flex-wrap: wrap; }
  .section-mini-card { min-width: 120px; }

  /* Insights grid: single column */
  .insights-grid { grid-template-columns: 1fr !important; }

  /* Dashboard grid: single column */
  .dash-grid { grid-template-columns: 1fr !important; }
}

/* ── Responsive: Small Mobile (≤480px) ────────────────────── */
@media (max-width: 480px) {
  .dock-icon { flex: 0 1 60px; min-height: 36px; }
  .dock-label { display: none; }
  .dock-glyph { font-size: var(--text-xl); }
  .dock-icon.dock-active::after { width: 18px; height: 2px; }
  .page-main { padding: 8px 6px; }

  .hm-table { font-size: var(--text-sm); }
  .hm-avatar { width: 24px; height: 24px; font-size: var(--text-2xs); }
  .hm-student-name { font-size: var(--text-base); }
  .hm-section-val { font-size: var(--text-xl); }
  .hm-overall-val { font-size: var(--text-2xl); }

  .student-name-xl { font-size: var(--text-xl); }
  .overall-val { font-size: var(--text-2xl); }
}

/* ── Sync Indicator ────────────────────────────────────────── */
.tb-sync { display:flex; align-items:center; margin-left:auto; margin-right:8px; }
.tb-sync-dot { width:8px; height:8px; border-radius:50%; transition: background 0.3s; }
.tb-sync-dot.idle { background: var(--score-3); }
.tb-sync-dot.syncing { background: var(--score-2); animation: syncPulse 1s infinite; }
.tb-sync-dot.error { background: var(--score-1); }
@keyframes syncPulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* ── Dark Mode ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1C1E;
    --bg-secondary: #151516;
    --surface: #2C2C2E;
    --surface-2: #3A3A3C;
    --surface-glass: rgba(44,44,46,0.82);
    --border: #48484A;
    --border-2: #3A3A3C;
    --text: #F5F5F7;
    --text-2: #AEAEB2;
    --text-3: #8E8E93;
    --active: #0A84FF;
    --active-light: rgba(10,132,255,0.18);
    --priority: #FF453A;
    --priority-light: rgba(255,69,58,0.18);
    --late: #FF9F0A;
    --score-0: #636366;
    --score-1: #FF453A;
    --score-2: #FF9F0A;
    --score-3: #30D158;
    --score-4: #0A84FF;
    --score-1-bg: rgba(255,69,58,0.2);
    --score-1-text: #FF6961;
    --score-2-bg: rgba(255,159,10,0.2);
    --score-2-text: #FFB340;
    --score-3-bg: rgba(48,209,88,0.2);
    --score-3-text: #4ADE80;
    --score-4-bg: rgba(10,132,255,0.2);
    --score-4-text: #64B5F6;
    --toolbar-bg-start: #2C2C2E;
    --toolbar-bg-end: #1C1C1E;
    --btn-hover-blue: #409CFF;
    --toggle-hover-dark: #4A4A4E;
    --danger: #FF453A;
    --iep-badge: #FF9F0A;
    --mod-badge: #7D7AFF;
    --overlay-hover: rgba(255,255,255,0.06);
    --overlay-pressed: rgba(255,255,255,0.1);
    --divider-subtle: rgba(255,255,255,0.06);
    --divider-medium: rgba(255,255,255,0.1);
    --divider-strong: rgba(255,255,255,0.15);
    --divider-heavy: rgba(255,255,255,0.2);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.2);
    --score-1-dark: #FF453A;
    --score-2-dark: #FF9F0A;
    --score-3-dark: #30D158;
    --score-4-dark: #0A84FF;
    --focus-banner-bg: rgba(10,132,255,0.12);
    --focus-banner-border: rgba(10,132,255,0.25);
    --section-hover: rgba(255,255,255,0.06);
    --accent-purple: #7D7AFF;
    --accent-purple-light: rgba(125,122,255,0.15);
    --report-block-bg: #2C2C2E;
    --report-callout-bg: rgba(255,159,10,0.1);
    --report-callout-border: rgba(255,159,10,0.25);
    --toast-error: #b52a20;
    --toast-success: #166534;
  }
}

/* ── Accessibility — reduced motion ────────────────────────── */
@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;
  }
}