/* Shared design system — Math & ELA practice apps */
/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* ─── MICRO-INTERACTIONS (global) ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.card:hover,
.panel:hover,
.question-card:hover,
.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ─── STUDENT UX FLOW (guidance — minimal chrome) ───────────── */
.ux-flow-step {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 8px;
}

.ux-next-hint {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0 0 8px;
}

.ux-completion-msg {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-plum-50);
  border: 1px solid var(--color-border-light);
}

.ux-timer-encouragement {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 0;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  min-height: 1em;
}

.ux-timer-encouragement:empty {
  display: none;
}

/* ─── DESIGN TOKENS (STAAR approved mock — royal blue system) ─ */
:root {
  --primary: #1a4a9e;
  --primary-dark: #0f2f66;
  --primary-soft: #e8edf7;
  --accent: #1a4a9e;
  --accent-orange: #f0ad4e;
  --accent-mock-green: #5cb85c;

  --bg-main: #F0F2F5;
  --bg-surface: #FFFFFF;
  --bg-soft: #e8edf7;

  --text-main: #1A1A2E;
  --text-muted: #7A8599;

  --success: #5cb85c;
  --warning: #f0ad4e;
  --error: #D32F2F;

  --border: #D0D5DD;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* Legacy name "plum" → mock blues (keeps existing selectors working) */
  --color-plum-900: #1a4a9e;
  --color-plum-800: #153d85;
  --color-plum-700: #1a4a9e;
  --color-plum-600: #2563c4;
  --color-plum-500: #3d7ad4;
  --color-plum-400: #5a92dc;
  --color-plum-200: #c5d4ec;
  --color-plum-100: #dce5f5;
  --color-plum-50:  #eef2fb;

  --color-lavender-600: #2C5F8A;
  --color-lavender-400: #5a8ab0;
  --color-lavender-100: #e8eef4;
  --color-lavender-50:  #f0f4f8;

  --color-gold-600: #E67E22;
  --color-gold-500: #E67E22;
  --color-gold-400: #f0a060;
  --color-gold-100: #fde8d4;
  --color-gold-50:  #fef5eb;

  --color-rose-600: #a34e74;
  --color-rose-400: #c08298;
  --color-rose-100: #f2e2ea;
  --color-rose-50:  #f8f0f3;

  --color-bg-page:        var(--bg-main);
  --color-bg-section-alt: var(--bg-soft);
  --color-bg-card:        var(--bg-surface);
  --color-border:         var(--border);
  --color-border-light:   #e4e8ec;

  --color-text-primary:   var(--text-main);
  --color-text-secondary: #4A5568;
  --color-text-tertiary:  #7A8599;
  --color-text-on-plum:   #ffffff;

  --color-success:    #2E7D32;
  --color-success-bg: #e8f5e9;
  --color-error:      #D32F2F;
  --color-error-bg:   #ffebee;
  --color-info:       #3B82C4;
  --color-info-bg:    #e3f2fd;

  --navy:         var(--color-plum-900);
  --navy-deep:    var(--color-plum-900);
  --navy-light:   var(--color-plum-700);
  --orange:       var(--color-gold-500);
  --orange-glow:  var(--color-gold-400);
  --orange-soft:  var(--color-gold-100);
  --gold:         var(--color-gold-500);
  --gold-soft:    var(--color-gold-100);
  --purple:       var(--primary);
  --purple-soft:  var(--color-plum-100);
  --bg:           var(--color-bg-page);
  --card:         var(--color-bg-card);
  --card-alt:     var(--color-bg-section-alt);
  --text:         var(--color-text-primary);
  --text-mid:     var(--color-text-secondary);
  --text-light:   var(--color-text-tertiary);
  --green:        var(--color-success);
  --green-soft:   var(--color-success-bg);
  --red:          var(--color-error);
  --red-soft:     var(--color-error-bg);
  --border:       var(--color-border);
  --border-light: var(--color-border-light);
  --tip-bg:       var(--color-lavender-50);
  --tip-border:   var(--color-lavender-600);

  --radius:      8px;
  --radius-lg:   8px;
  --radius-pill: 12px;
  --radius-md:   6px;
  --radius-sm:   4px;
  --radius-full: 9999px;

  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-btn: 0 2px 8px rgba(0, 0, 0, 0.1);

  --font-display: system-ui, "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    system-ui, "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:      system-ui, "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  0.875rem;
  --fs-md:    1rem;
  --fs-lg:    1rem;
  --fs-xl:    1.125rem;

  --z-nav:      100;
  --z-timer:    200;
  --z-confetti: 9999;
}

/* ─── BASE ───────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  font-size: var(--fs-base);
}

/* ─── GLOBAL FOCUS RING ──────────────────────────────────────── */
/*
 * Visible keyboard-focus indicator for every interactive element.
 * Uses :focus-visible so mouse users are not affected.
 */
:focus-visible {
  outline: 2px solid var(--color-plum-600);
  outline-offset: 2px;
}

/* ─── HEADER (64px bar: brand | grade/context | tools) ─────────── */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 0 clamp(16px, 3vw, 24px);
  min-height: 72px;
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  overflow: visible;
  box-sizing: border-box;
}

.site-header-inner {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
  min-height: 72px;
  overflow: visible;
}

.site-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}

.site-header-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.site-logo {
  height: clamp(32px, 3.4vw, 36px);
  width: auto;
  max-width: 140px;
  display: block;
  object-fit: contain;
}

.site-header-brand-name {
  font-family: var(--font-ui);
  font-size: clamp(0.8125rem, 1.5vw, 1rem);
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.site-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.site-header-center .header-session-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin-top: 0;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

/* Keep badge in DOM for scripts; bar uses title-only for grade + subject */
.site-header-center .header-subject-badge {
  display: none !important;
}

.header-subject-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0f2f66;
  background: #F5C518;
  border: none;
  border-radius: 12px;
  padding: 4px 10px;
  line-height: 1;
  min-height: 24px;
}

.header-subject-badge[hidden] {
  display: none !important;
}

.site-header-center .header-session-titles {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.site-header-center .exam-title {
  font-family: var(--font-ui);
  font-size: clamp(0.8125rem, 1.55vw, 0.9375rem);
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: right;
  flex: none;
  width: 100%;
}

.site-header-center .header-exam-type {
  font-family: var(--font-ui);
  font-size: clamp(0.6875rem, 1.25vw, 0.75rem);
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: right;
  flex: none;
  width: 100%;
}

/* Legacy report / static shells (unused in current lesson header) */
.header-standards-line {
  font-family: var(--font-ui);
  font-size: clamp(0.625rem, 1.2vw, 0.6875rem);
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
}

.exam-badge {
  display: inline-block;
  flex-shrink: 0;
  margin-top: 0;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--primary-dark);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .site-header {
    padding: 0 12px;
  }
  .site-header-inner {
    gap: 8px;
    grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  }
  .site-header-left {
    gap: 8px;
  }
  .lt-lockup__img {
    height: clamp(32px, 9vw, 40px);
    max-width: min(240px, 58vw);
  }
  .site-header-brand-name {
    font-size: clamp(0.75rem, 3vw, 0.875rem);
  }
  .site-header-center .exam-title {
    font-size: clamp(0.75rem, 3.2vw, 0.8125rem);
  }
  .site-header-center .header-exam-type {
    font-size: clamp(0.625rem, 2.8vw, 0.6875rem);
  }
  .header-end-tools {
    flex-shrink: 0;
    justify-self: end;
    align-items: flex-end;
    overflow: hidden;
    max-width: min(200px, 42vw);
  }
  .app-mode-toolbar {
    align-items: flex-end;
  }
  .subject-switcher-row {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}

/* ─── STUDENT INFO BAR ───────────────────────────────────────── */
.info-bar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}

/* Each label + input grouped as a vertical pair */
.info-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.info-group label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;  /* 11px — deliberate: small uppercase field label */
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-mid);
  cursor: pointer;
}

.info-group input {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  width: 200px;
  color: var(--text);
  background: var(--card);
  transition: border-color .2s, box-shadow .2s;
}

.info-group input:focus {
  outline: none;
  border-color: var(--color-plum-600);
  box-shadow: 0 0 0 3px rgba(59, 130, 196, 0.12);
}

/* Readonly date field — visually distinct from editable inputs */
.info-group input[readonly] {
  background: var(--card-alt);
  color: var(--text-mid);
  cursor: default;
}

.info-group input#sessionNum {
  width: 80px;
}

/* ─── STUDENT PROFILE BAR (multi-learner roster) ─────────────── */
.student-identity-bar {
  background: var(--color-lavender-50);
  border-bottom: 1px solid var(--color-border-light);
  padding: 10px 24px;
}
.student-identity-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  justify-content: center;
}
.student-identity-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
  min-width: 0;
}
.student-current-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 320px;
  min-width: 0;
}
.student-current-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-mid);
}
.student-current-badge {
  display: inline-block;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--color-plum-100);
  border: 1px solid var(--color-plum-200);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-plum-800);
  line-height: 1.35;
  word-break: break-word;
}
.student-identity-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.student-identity-field label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-mid);
}
.student-profile-select {
  min-width: 200px;
  max-width: 280px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.student-profile-select:focus {
  outline: none;
  border-color: var(--color-plum-600);
  box-shadow: 0 0 0 3px rgba(59, 130, 196, 0.12);
}
.student-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.student-identity-actions .btn-sm {
  box-shadow: none;
}

/* Tutor-only: export / import student data (hidden in student mode) */
.student-backup-toolbar {
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border-light);
  padding: 8px 24px;
}
.student-backup-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  justify-content: center;
}
.student-backup-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.student-backup-toolbar .btn-sm {
  box-shadow: none;
}

.btn-student-remove {
  background: transparent;
  color: var(--color-rose-600);
  border: 1.5px solid var(--color-rose-400);
  box-shadow: none;
}
.btn-student-remove:hover {
  background: var(--color-rose-50);
  border-color: var(--color-rose-600);
}

.btn-student-remove-solid {
  background: var(--color-rose-600);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-btn);
}
.btn-student-remove-solid:hover {
  background: #8a3d5c;
  box-shadow: var(--shadow-md);
}

.student-delete-dialog-inner {
  padding: 24px;
}
.student-delete-message {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  line-height: 1.5;
  margin: 0 0 10px;
}
.student-delete-hint {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  line-height: 1.5;
  margin: 0 0 20px;
}

.student-edit-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 420px;
  width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
  background: var(--card);
}
.student-edit-dialog::backdrop {
  background: rgba(27, 58, 92, 0.45);
}
.student-edit-dialog .student-dialog-title {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}

.student-dialog-lede {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: -6px 0 18px;
}

.student-field-hint {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  line-height: 1.4;
  margin: 0;
}

.student-onboard-meta {
  margin: 4px 0 2px;
  padding: 14px 0 0;
  border-top: 1px solid var(--color-border-light);
}

.student-onboard-step,
.student-onboard-confidence {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.student-onboard-step {
  margin-bottom: 8px;
}

.student-onboard-confidence {
  font-weight: 500;
  color: var(--color-text-primary);
}

.student-edit-dialog form {
  padding: 24px;
}
.student-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.student-form-field label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-mid);
}
.student-form-field .optional-mark {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-light);
}
.student-form-field input,
.student-form-field textarea {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--card);
}
.student-form-field textarea {
  resize: vertical;
  min-height: 72px;
}
.student-form-field input:focus,
.student-form-field textarea:focus {
  outline: none;
  border-color: var(--color-plum-600);
  box-shadow: 0 0 0 3px rgba(59, 130, 196, 0.12);
}
.student-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ─── STICKY NAV ─────────────────────────────────────────────── */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-nav) - 1);
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  padding: 0 clamp(16px, 3vw, 24px);
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-wrap::-webkit-scrollbar {
  display: none;
}

.nav-tabs {
  display: flex;
  gap: 32px;
  justify-content: center;
  min-width: max-content;
  margin: 0 auto;
  align-items: stretch;
}

.nav-tab {
  flex-shrink: 0;
  padding: 14px 0;
  border-radius: 0;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--color-text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.nav-tab:hover:not([aria-disabled="true"]) {
  color: var(--color-plum-700);
  background: transparent;
  transform: translateY(-1px);
  border-bottom-color: rgba(59, 130, 196, 0.35);
}

.nav-tab.teacher-tab:hover:not([aria-disabled="true"]) {
  border-bottom-color: rgba(217, 119, 6, 0.45);
}

.nav-tab:focus-visible {
  outline: 2px solid var(--color-plum-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.nav-tab.active,
.nav-tab[aria-selected="true"] {
  color: var(--color-plum-900);
  font-weight: 700;
  border-bottom-color: var(--color-plum-600);
  background: transparent;
  box-shadow: none;
}

.nav-tab.teacher-tab {
  color: var(--color-gold-600);
}

.nav-tab.teacher-tab.active,
.nav-tab.teacher-tab[aria-selected="true"] {
  color: var(--color-gold-600);
  border-bottom-color: var(--color-gold-500);
  background: transparent;
}

/* Answer Key locked state — applied until exam is submitted */
.nav-tab[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Panel-level guard: keeps content hidden even if .active is added externally */
#answerkey[data-locked] {
  display: none !important;
}

.nav-tab.p1-tab {
  color: var(--color-plum-600);
}

.nav-tab.p1-tab.active,
.nav-tab.p1-tab[aria-selected="true"] {
  color: var(--color-plum-900);
  border-bottom-color: var(--color-plum-600);
  background: transparent;
}

.phase-divider {
  flex-shrink: 0;
  width: 1px;
  height: 20px;
  background: var(--color-border-light);
  border-radius: 1px;
  margin: auto 0;
}

/* ─── CONTENT AREA ───────────────────────────────────────────── */
.content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

.section {
  display: none;
}

.section.active {
  display: block;
  animation: fadeUp .4s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── SECTION HEADER ─────────────────────────────────────────── */
.section-hdr {
  text-align: center;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border-light);
}

.section-hdr .label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-600);
  margin-bottom: 6px;
}

.section-hdr .label-purple {
  color: var(--color-plum-600);
}

.section-hdr h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.section-hdr .sub {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-top: 8px;
  line-height: 1.6;
}

/* ─── DIRECTIONS BOX ─────────────────────────────────────────── */
.directions {
  background: var(--color-bg-card);
  border: 1px solid rgba(76, 29, 149, 0.08);
  border-left: 3px solid var(--color-plum-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 26px 30px;
  margin-bottom: 36px;
  box-shadow: var(--shadow-md);
}

.directions h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 14px;
}

.directions p {
  font-size: var(--fs-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.directions p + p {
  margin-top: 12px;
}

/* ─── PASSAGE ────────────────────────────────────────────────── */
.passage-card {
  background: var(--color-bg-card);
  border: 1px solid rgba(76, 29, 149, 0.07);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin-bottom: 36px;
  box-shadow: var(--shadow-md);
}

.passage-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Raised from --text-light to --text-mid for WCAG AA compliance */
.passage-author {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 28px;
  font-style: italic;
}

.passage-text p {
  font-size: var(--fs-base);
  line-height: 1.9;
  margin-bottom: 18px;
  text-indent: 2em;
  color: var(--color-text-primary);
}

.passage-text p:first-child {
  text-indent: 0;
}

.passage-text .poetry-line {
  text-indent: 0;
  text-align: center;
  margin-bottom: 6px;
  font-style: italic;
  line-height: 1.8;
}

.passage-text .stanza-break {
  height: 20px;
}

/* ─── STRATEGY TIP ───────────────────────────────────────────── */
.tip-box {
  background: var(--color-lavender-50);
  border: 1px solid rgba(116, 100, 163, 0.12);
  border-left: 3px solid var(--color-lavender-600);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 26px;
  margin: 32px 0;
}

.tip-box .tip-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-lavender-600);
  margin-bottom: 6px;
}

.tip-box p {
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  line-height: 1.75;
}

/* ─── QUESTION BLOCK ─────────────────────────────────────────── */
.q-block {
  background: var(--color-bg-card);
  border: 1px solid rgba(76, 29, 149, 0.06);
  border-radius: var(--radius);
  padding: 30px 34px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
  transition: border-color .3s, box-shadow 0.3s ease;
}

.q-block.correct  { border-color: var(--green); background: var(--green-soft); }
.q-block.incorrect { border-color: var(--red);  background: var(--red-soft); }

.q-num {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold-600);
  margin-bottom: 8px;
}

.q-text {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.75;
  margin-bottom: 20px;
}

.q-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*
 * Answer options: native <button> elements for full keyboard access.
 * All visual styles are preserved; only the element type changed.
 */
button.q-opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  min-height: 48px;
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
  background: var(--color-bg-page);
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  appearance: none;
  -webkit-appearance: none;
}

button.q-opt:hover:not(:disabled) {
  border-color: var(--color-plum-500);
  background: #fff;
}

button.q-opt:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-color: var(--navy-light);
}

button.q-opt.selected { border-color: var(--color-plum-600); background: var(--color-plum-50); font-weight: 600; box-shadow: 0 0 0 1px rgba(59, 130, 196, 0.2); }
button.q-opt.right    { border-color: var(--green); background: var(--green-soft); }
button.q-opt.wrong    { border-color: var(--red);   background: var(--red-soft); opacity: .75; }

.q-opt .letter {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-mid);
  transition: background .2s, color .2s;
}

button.q-opt.selected .letter { background: var(--color-plum-600); color: #fff; }
button.q-opt.right .letter    { background: var(--green); color: #fff; }
button.q-opt.wrong .letter    { background: var(--red);   color: #fff; }

.q-opt .opt-text {
  font-size: var(--fs-base);
  line-height: 1.65;
  padding-top: 2px;
}

/*
 * aria-live feedback container.
 * Uses visibility + height collapse (NOT display:none) so the element
 * remains in the accessibility tree at all times. This ensures
 * aria-live="polite" announcements fire reliably across all AT/browser
 * combinations, including VoiceOver/Safari which won't announce content
 * added to a display:none element that becomes display:block.
 */
.q-feedback {
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.65;
  /* Hidden: collapse to zero height, invisible, out of pointer interaction */
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin-top: 0;
  padding: 0;
}

.q-feedback.show {
  visibility: visible;
  height: auto;
  overflow: visible;
  margin-top: 14px;
  padding: 14px 18px;
  animation: fadeUp .3s ease;
}

.q-feedback.fb-correct   { background: var(--green-soft); color: var(--green); border: 1px solid rgba(46, 125, 50, .2); }
.q-feedback.fb-incorrect { background: var(--red-soft);   color: var(--red);   border: 1px solid rgba(198, 40, 40, .2); }

/* ─── CONSTRUCTED RESPONSE ───────────────────────────────────── */
.cr-block {
  background: var(--color-bg-card);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.cr-block .q-num {
  color: var(--navy);
}

.cr-prompt {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.75;
  margin-bottom: 20px;
}

.cr-textarea {
  width: 100%;
  min-height: 160px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
  resize: vertical;
  background: var(--card);
  transition: border-color .2s, box-shadow .2s;
}

.cr-textarea:focus {
  outline: none;
  border-color: var(--color-plum-600);
  box-shadow: 0 0 0 3px rgba(59, 130, 196, 0.12);
}

.cr-counter {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--text-light);
  text-align: right;
  margin-top: 4px;
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.submit-row {
  text-align: center;
  margin: 44px 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
  box-shadow: var(--shadow-btn);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: 2px solid var(--color-plum-600);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(59, 130, 196, 0.28);
  border-radius: var(--radius-md);
}

.btn-primary {
  background: #3B82C4;
  color: #fff;
  border-radius: 4px;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background: #2C5F8A;
  box-shadow: var(--shadow-md);
}
.btn-primary:active { background: #1B3A5C; }

.btn-orange {
  background: var(--color-gold-500);
  color: #fff;
}
.btn-orange:hover {
  background: var(--color-gold-600);
  box-shadow: var(--shadow-md);
}

.btn-purple {
  background: var(--color-plum-600);
  color: #fff;
}
.btn-purple:hover {
  background: var(--color-plum-700);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--color-plum-700);
  border: 2px solid var(--color-border);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--color-plum-50);
  border-color: var(--color-plum-400);
  box-shadow: var(--shadow-md);
}

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ─── SCORE BANNER ───────────────────────────────────────────── */
.score-banner {
  text-align: center;
  padding: 40px 28px;
  border-radius: var(--radius-lg);
  margin: 36px 0;
  background: var(--color-plum-900);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.score-banner .big-score {
  font-family: var(--font-ui);
  font-size: 2.5rem;
  font-weight: 700;
}

.score-banner .score-label {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-text-on-plum-muted, rgba(255,255,255,0.75));
  margin-top: 8px;
  line-height: 1.5;
}

.score-banner .band {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 18px;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Score bands */
.band-excellent   { background: var(--color-success);    color: #fff; }
.band-approaching { background: var(--color-gold-600);   color: #fff; }
.band-needs       { background: var(--color-error);      color: #fff; }

/* ─── ANSWER KEY TABLE ───────────────────────────────────────── */
/* Scrollable wrapper prevents table overflow on narrow screens */
.ak-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  margin-bottom: 28px;
}

.ak-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 0;
}

.ak-table th {
  background: var(--color-plum-900);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 20px;
  text-align: left;
}

.ak-table td {
  background: var(--card);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-base);
  line-height: 1.7;
  vertical-align: top;
}

.ak-table tr:nth-child(even) td {
  background: var(--card-alt);
}

.ak-table .ans-letter {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--green);
  font-size: var(--fs-base);
}

.ak-table .teks-cell-empty {
  color: var(--color-text-tertiary);
  font-size: var(--fs-sm);
}

.explanation-item .exp-meta-skill {
  font-weight: 500;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}

.explanation-item .exp-answer-line {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.missed-teks-intro {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin: 0 0 12px;
  line-height: 1.5;
}

.missed-teks-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
}

.missed-teks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.missed-teks-table th,
.missed-teks-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
}

.missed-teks-table th {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  background: var(--color-plum-50);
}

.missed-teks-status {
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.missed-teks-wrong {
  color: var(--color-error);
}

.missed-teks-unanswered {
  color: var(--color-gold-600);
}

/* ─── PARENT REPORT ──────────────────────────────────────────── */
.report-card {
  background: var(--color-bg-card);
  border: 1px solid rgba(76, 29, 149, 0.07);
  border-left: 3px solid var(--color-plum-200);
  border-radius: var(--radius-lg);
  padding: 34px 38px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
}

.report-card h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-light);
}

.report-card p,
.report-card li {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--color-text-primary);
}

.report-card p + p {
  margin-top: 12px;
}

.skill-bar-wrap {
  margin: 16px 0;
}

.skill-bar-label {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.skill-bar {
  height: 6px;
  background: var(--color-plum-50);
  border-radius: 3px;
  overflow: hidden;
}

.skill-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--color-plum-500);
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── PHASE 1 STRATEGY CARDS ─────────────────────────────────── */
.strat-card {
  background: var(--color-bg-card);
  border: 1px solid rgba(76, 29, 149, 0.07);
  border-radius: var(--radius-lg);
  padding: 34px 38px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

/* Decorative watermark number */
.strat-card::before {
  content: attr(data-num);
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 400;
  color: var(--color-plum-100);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.strat-card > * {
  position: relative;
  z-index: 1;
}

.strat-card h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-plum-700);
  margin-bottom: 14px;
}

.strat-card p {
  font-size: var(--fs-base);
  line-height: 1.75;
  margin-bottom: 14px;
  max-width: 65ch;
}

.strat-example {
  background: var(--color-lavender-50);
  border: 1px solid rgba(116, 100, 163, 0.12);
  border-left: 3px solid var(--color-plum-600);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  margin-top: 18px;
}

.strat-example .ex-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-plum-600);
  margin-bottom: 8px;
}

.strat-example p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  margin-bottom: 8px;
}

/* ─── PHASE TRANSITION BANNER ────────────────────────────────── */
.phase-banner {
  text-align: center;
  padding: 44px 36px;
  border-radius: var(--radius-lg);
  margin: 40px 0;
  position: relative;
  overflow: hidden;
}

.phase-banner.p1 {
  background: linear-gradient(180deg, var(--primary-soft) 0%, #ffffff 100%);
  color: var(--color-plum-900);
  border: 1px solid rgba(76, 29, 149, 0.15);
  box-shadow: var(--shadow-md);
}

.phase-banner.p2 {
  background: linear-gradient(180deg, #ede4f7 0%, var(--primary-soft) 100%);
  color: var(--color-plum-900);
  border: 1px solid rgba(76, 29, 149, 0.15);
  box-shadow: var(--shadow-md);
}

.phase-banner .phase-num {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 8px;
}

.phase-banner h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
}

.phase-banner .phase-desc {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.65;
  opacity: .88;
  margin-top: 10px;
}

/* ─── GUIDED PRACTICE PROGRESS ───────────────────────────────── */
.gp-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 28px 0;
  flex-wrap: wrap;
}

.gp-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-light);
  transition: all .3s;
  border: 2px solid transparent;
}

.gp-dot.done   { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); }
.gp-dot.active { background: var(--color-plum-100);  color: var(--color-plum-700); border-color: var(--color-plum-600); transform: scale(1.15); }

/* ─── TIMER BAR ──────────────────────────────────────────────── */
.timer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-timer);
  background: var(--bg-surface);
  border-top: 1px solid var(--color-border);
  color: var(--text-main);
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: 0 -4px 20px rgba(27, 58, 92, 0.08);
}

.timer-clock {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.timer-progress {
  flex: 1;
  max-width: 300px;
  height: 8px;
  background: rgba(76, 29, 149, 0.12);
  border-radius: 20px;
  margin: 0 16px;
  overflow: hidden;
}

.timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: 20px;
  transition: width 1s linear;
}

.timer-label {
  font-size: var(--fs-xs);
  opacity: .75;
}

/* ─── CONFETTI ───────────────────────────────────────────────── */
.confetti-piece {
  position: fixed;
  z-index: var(--z-confetti);
  pointer-events: none;
  animation: confettiFall 2.5s ease-out forwards;
}

@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .content {
    padding: 24px 14px 96px;
  }

  .passage-card {
    padding: 22px 20px;
  }

  .q-block,
  .cr-block {
    padding: 20px;
  }

  .strat-card {
    padding: 24px 22px;
  }

  .report-card {
    padding: 24px 22px;
  }

  .nav-tabs {
    justify-content: flex-start;
    gap: 20px 28px;
  }

  .info-bar {
    gap: 14px;
    padding: 10px 16px;
  }

  .info-group input {
    width: 160px;
  }

  .info-group input#sessionNum {
    width: 64px;
  }

  .student-identity-inner {
    justify-content: flex-start;
  }
  .student-profile-select {
    min-width: 160px;
    max-width: 100%;
  }

  .student-current-wrap {
    max-width: 100%;
  }
}

/* ─── SCREEN-READER ONLY ─────────────────────────────────────── */
/*
 * Hides an element visually while keeping it in the accessibility tree.
 * Used for the persistent aria-live announcer and any future SR-only text.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── SITE FOOTER ───────────────────────────────────────────── */
.site-footer {
  margin-top: 56px;
  padding: 32px 16px 40px;
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg-page);
  text-align: center;
}

.site-footer p {
  max-width: 820px;
  margin: 0 auto 10px;
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  line-height: 1.65;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

/* ─── PRINT ──────────────────────────────────────────────────── */
/* ─── HINT BUTTON ────────────────────────────────────────────── */
.q-hint-wrap { margin-top: 8px; }

.hint-btn {
  background: transparent;
  border: 1.5px solid var(--color-plum-200);
  color: var(--color-plum-600);
  border-radius: var(--radius-md);
  padding: 4px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hint-btn:hover {
  background: var(--color-plum-50);
  border-color: var(--color-plum-400);
}
.hint-btn:focus-visible {
  outline: 2px solid var(--color-plum-600);
  outline-offset: 2px;
}

.q-hint {
  margin-top: 10px;
  padding: 16px 20px;
  background: var(--color-lavender-50);
  border-left: 3px solid var(--color-lavender-600);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
  line-height: 1.65;
}

/* ─── TEACHER NOTE (Answer Key) ─────────────────────────────── */
.teacher-note {
  margin-top: 10px;
  padding: 14px 18px;
  background: var(--color-gold-50);
  border: 1px solid var(--color-gold-100);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
  line-height: 1.65;
}

/* ─── TEKS STANDARD BADGE ────────────────────────────────────── */
.std-badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-plum-50);
  color: var(--color-plum-600);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: 0.04em;
  font-family: var(--font-ui);
}

/* ─── REPORT ACTIONS (copy / print buttons) ─────────────────── */
.report-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.btn-sm {
  min-height: 40px;
  padding: 9px 18px;
  font-size: var(--fs-sm);
}

/* ─── TEKS SECTION HEADER (inside report-card) ──────────────── */
.teks-section-hdr {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-plum-700);
  margin: 24px 0 10px;
  border-top: 1px solid var(--color-border-light);
  padding-top: 16px;
}
.teks-section-hdr:first-child { margin-top: 0; border-top: none; padding-top: 0; }

/* ─── STD LIST (strengths / weaknesses) ─────────────────────── */
.std-list { margin: 8px 0 0 18px; padding: 0; }
.std-list li { margin-bottom: 6px; font-size: var(--fs-sm); line-height: 1.65; color: var(--color-text-secondary); }

/* ─── SUBJECT LANDING (root index.html) ─────────────────────── */
.lt-landing-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.lt-landing-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 32px);
}

.lt-landing {
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.lt-landing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-card, 0 8px 32px rgba(27, 58, 92, 0.08));
  padding: clamp(28px, 5vw, 40px) clamp(22px, 4vw, 36px);
}

.lt-landing-kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-plum-600);
  margin-bottom: 10px;
}

.lt-landing-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.lt-landing-desc {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-bottom: 28px;
}

.lt-landing-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lt-landing-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 14px 24px;
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}

.lt-landing-actions a.btn,
.lt-landing-actions a.btn:visited {
  color: #fff;
}

/* ─── HEADER: subject + Student/Teacher toggle ──────────────── */
.header-end-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 0;
  justify-self: end;
  align-self: center;
  white-space: nowrap;
  overflow: hidden;
  max-width: min(380px, 38vw);
}

/* ─── SUBJECT SWITCHER (Math / ELA app headers) ──────────────── */
.subject-switcher {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}

.app-mode-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.app-mode-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.app-mode-seg {
  display: inline-flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

.app-mode-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 7px 14px;
  min-height: 36px;
  border: none;
  cursor: pointer;
  background: #fff;
  color: var(--text-main);
  transition: background 0.15s ease, color 0.15s ease;
}

.app-mode-btn:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.app-mode-btn.is-active {
  background: var(--primary);
  color: #fff;
}

/* Student mode: hide tutor tools (logic unchanged; visibility only) */
html.app-mode-student .teacher-tab,
html.app-mode-student #answerkey,
html.app-mode-student #report {
  display: none !important;
}

html.app-mode-student .teacher-only-backup {
  display: none !important;
}

.subject-switcher-home {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.subject-switcher-home:hover {
  color: var(--primary-dark);
  border-bottom-color: rgba(26, 74, 158, 0.45);
}

.subject-switcher-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
}

.subject-switcher-pill {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text-main);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.subject-switcher-pill:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.subject-switcher-pill.is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: none;
}

/* ─── STUDENT DASHBOARD (welcome — session history summary) ─── */
.student-summary-card {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-plum-600);
  box-shadow: 0 2px 12px rgba(27, 58, 92, 0.06);
  line-height: 1.55;
}

.student-summary-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-light);
}

.student-summary-top-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.student-dashboard-grade {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.35;
}

.student-summary-heading {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-plum-700);
  margin: 0;
}

.student-summary-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.student-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

.student-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.student-summary-cell--wide {
  grid-column: 1 / -1;
}

.student-summary-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  line-height: 1.35;
}

.student-summary-val {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
  word-break: break-word;
}

/* Dashboard metrics: small label above, larger number below (scan-friendly) */
.student-dash-metric:not(.student-dash-metric--hero) .student-summary-val {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.student-dash-metric:not(.student-dash-metric--hero) {
  gap: 5px;
}

.student-dash-metric--hero .student-summary-label {
  margin-bottom: 2px;
}

@media (max-width: 520px) {
  .student-summary-grid {
    grid-template-columns: 1fr;
  }
  .student-summary-cell--wide {
    grid-column: auto;
  }
}

/* ─── STUDENT DASHBOARD — TEKS panels (welcome) ─────────────── */
.student-dash-card .student-dash-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 20px 22px;
  align-items: start;
}

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

.student-dash-panel {
  padding: 16px 18px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, var(--color-plum-50) 120%);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 10px rgba(27, 58, 92, 0.06);
  line-height: 1.55;
}

.student-dash-panel--teks {
  grid-column: 1 / -1;
  background: linear-gradient(165deg, #fff 0%, rgba(212, 168, 67, 0.06) 100%);
  border-left: 3px solid var(--color-gold-500);
}

.student-dash-panel--insights {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, var(--color-plum-50) 0%, #fff 55%);
}

.student-dash-panel-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-plum-800);
  margin: 0 0 12px;
  line-height: 1.35;
}

.student-dash-teks-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  margin: -4px 0 6px;
  line-height: 1.55;
  max-width: 52rem;
}

.student-dash-parent-export {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
}

.student-dash-focus-wrap {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(27, 58, 92, 0.12);
  background: rgba(255, 255, 255, 0.65);
}

.student-dash-focus-title {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-plum-700);
  margin: 0 0 8px;
}

.student-dash-focus-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.student-dash-focus-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
}

.student-dash-focus-teks {
  font-weight: 700;
  color: var(--color-text-primary);
}

.student-dash-focus-meta {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.student-dash-teks-scope {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-plum-700);
  margin: 0 0 10px;
  line-height: 1.45;
}

.student-dash-metrics {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.student-dash-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.student-dash-metric--hero {
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--color-border-light);
}

.student-dash-hero-pct {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-plum-800);
}

.student-dash-hero-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 42rem;
}

.student-dash-metric--subtle .student-summary-val {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.student-dash-hint {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  margin: 0 0 10px;
  padding: 8px 10px;
  background: rgba(212, 168, 67, 0.12);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 168, 67, 0.35);
}

.student-dash-empty {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.45;
}

.teks-dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
  line-height: 1.5;
}

.teks-dash-row {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  background: #fff;
}

.teks-dash-row--strong {
  border-color: rgba(46, 125, 50, 0.35);
  background: rgba(46, 125, 50, 0.06);
}

.teks-dash-row--mid {
  border-color: rgba(230, 126, 34, 0.35);
  background: rgba(230, 126, 34, 0.06);
}

.teks-dash-row--weak {
  border-color: rgba(198, 40, 40, 0.35);
  background: rgba(198, 40, 40, 0.06);
}

.teks-dash-row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 4px;
}

.teks-dash-skill {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
}

.teks-dash-tier {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.teks-dash-mastery {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}

.teks-dash-mastery--mastered {
  background: rgba(27, 94, 32, 0.12);
  color: #1b5e20;
}

.teks-dash-mastery--developing {
  background: rgba(230, 81, 0, 0.12);
  color: #e65100;
}

.teks-dash-mastery--needs-support {
  background: rgba(198, 40, 40, 0.12);
  color: #c62828;
}

.teks-dash-trend {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.teks-dash-trend--up {
  color: #1b5e20;
  background: rgba(27, 94, 32, 0.12);
}

.teks-dash-trend--down {
  color: #c62828;
  background: rgba(198, 40, 40, 0.1);
}

.teks-dash-trend--flat {
  color: var(--color-text-secondary);
  background: rgba(27, 58, 92, 0.06);
}

.teks-dash-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.teks-dash-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(27, 58, 92, 0.08);
  overflow: hidden;
}

.teks-dash-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-plum-600), var(--color-gold-500));
  min-width: 2px;
  transition: width 0.25s ease;
}

.teks-dash-row--strong .teks-dash-bar-fill {
  background: linear-gradient(90deg, #2e7d32, #43a047);
}

.teks-dash-row--weak .teks-dash-bar-fill {
  background: linear-gradient(90deg, #c62828, #e57373);
}

.teks-dash-row--mid .teks-dash-bar-fill {
  background: linear-gradient(90deg, #e65100, #ffb74d);
}

.student-dash-insight {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.student-dash-insight-val {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.45;
  word-break: break-word;
  letter-spacing: -0.01em;
}

.student-dash-insight-divider {
  height: 1px;
  background: var(--color-border-light);
  margin: 4px 0;
}

.student-dash-skill-pair {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.student-dash-skill-pair em {
  font-style: normal;
  font-weight: 700;
  color: var(--color-plum-700);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── PREVIOUS SESSION (localStorage, welcome screen) ───────── */
.previous-session-card {
  margin: 0 0 20px;
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--color-plum-50) 0%, #fff 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-plum-600);
  box-shadow: 0 2px 14px rgba(27, 58, 92, 0.07);
}

.previous-session-hdr {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-plum-700);
  margin-bottom: 12px;
}

.previous-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 20px;
}

.previous-session-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ps-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ps-val {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.35;
  word-break: break-word;
}

/* ─── SESSION HISTORY (per student + subject, localStorage) ─── */
.session-history-section {
  margin: 20px 0 24px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 8px rgba(27, 58, 92, 0.05);
  line-height: 1.55;
}

.session-history-hdr-row {
  margin-bottom: 14px;
}

.session-history-hdr {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
  line-height: 1.35;
}

.session-history-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  line-height: 1.55;
  margin: 0;
  max-width: 42rem;
}

.session-history-scope {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-plum-600);
}

.session-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.session-history-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--color-bg-section-alt);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--color-lavender-400);
}

.session-history-item-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.session-history-subject {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.session-history-subject--math {
  background: var(--color-plum-100);
  color: var(--color-plum-700);
  border: 1px solid var(--color-plum-200);
}

.session-history-subject--ela {
  background: var(--color-gold-50);
  color: var(--color-gold-600);
  border: 1px solid var(--color-gold-100);
}

.session-history-subject--other {
  background: var(--color-lavender-50);
  color: var(--color-lavender-600);
  border: 1px solid var(--color-lavender-100);
}

.session-history-date {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.session-history-score-row,
.session-history-metric {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-text-primary);
  line-height: 1.45;
}

.session-history-metric-label,
.session-history-teks-label {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-right: 4px;
}

.session-history-teks {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.45;
  padding-top: 4px;
  margin-top: 2px;
  border-top: 1px dashed var(--color-border-light);
}

.session-history-item-title {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.35;
}

.session-history-item-meta {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.session-history-muted {
  color: var(--color-text-tertiary);
  font-weight: 500;
}

/* ─── PARENT REPORT — summary & tutor notes ─────────────────── */
.report-card-summary {
  border-left: 4px solid var(--color-gold-500);
  background: linear-gradient(180deg, rgba(250, 247, 238, 0.55) 0%, var(--card) 48%);
}

.report-summary-subject {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.report-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.report-summary-item--wide {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .report-summary-grid {
    grid-template-columns: 1fr;
  }
  .report-summary-item--wide {
    grid-column: auto;
  }
}

.report-summary-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-plum-700);
  margin-bottom: 6px;
}

.report-summary-student .report-student-name-line {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
}

.report-profile-mismatch-desc {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.report-summary-item p,
.report-summary-next {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-primary);
}

.report-summary-muted {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

ul.report-summary-teks {
  margin: 0;
  padding-left: 18px;
}

.report-teks-narrative {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-primary);
}

/* Parent report — shareable TEKS blurb */
.report-card-family-teks {
  border-left: 4px solid var(--color-gold-500);
  background: linear-gradient(180deg, rgba(212, 168, 67, 0.07) 0%, var(--card) 48%);
}

.report-family-lead {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0 0 12px;
}

.report-family-footnote {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  margin: 10px 0 0;
}

.parent-teks-share-text {
  display: block;
  margin: 0;
  padding: 14px 16px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-primary);
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.tutor-notes-wrap {
  max-width: 900px;
  margin: 0 auto 20px;
  padding: 0 clamp(16px, 3vw, 24px);
}

.tutor-notes-card {
  border-left: 4px solid var(--color-plum-600);
}

.tutor-notes-kicker {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-plum-500);
  margin-left: 8px;
}

.tutor-notes-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin: 0 0 12px;
  line-height: 1.5;
}

.tutor-notes-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.55;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  resize: vertical;
  background: #fff;
  color: var(--text);
  box-sizing: border-box;
}

.tutor-notes-textarea:focus {
  outline: 2px solid var(--color-plum-400);
  outline-offset: 1px;
}

@media print {
  .nav-wrap,
  .site-header,
  .timer-bar,
  .info-bar,
  .student-identity-bar,
  .student-backup-toolbar,
  .btn,
  .report-actions,
  .submit-row,
  footer,
  .q-feedback { display: none !important; }

  /* Show only the report on print */
  .section { display: none !important; }
  #report   { display: block !important; }

  body { background: #fff; font-size: 11pt; }

  .report-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
}