/* ═══════════════════════════════════════════════════════════
   Erikson Study App - Modern Theme with Light/Dark Mode
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Light Mode (Default) ─────────────────────────────────── */
:root {
  /* Core palette - clean light theme */
  --bg: #f8f9fb;
  --bg-elevated: #ffffff;
  --panel: #ffffff;
  --panel-hover: #f3f4f6;

  /* Text hierarchy - WCAG AA compliant (4.5:1 min contrast) */
  --text: #1f2937;
  --text-secondary: #4b5563;  /* 7:1 contrast on white */
  --text-muted: #6b7280;      /* 5.3:1 contrast on white */

  /* Accent colors */
  --accent: #1d4ed8;
  --accent-glow: rgba(59, 130, 246, 0.1);
  --accent-strong: #1e40af;

  /* Semantic colors */
  --success: #065f46;
  --success-glow: rgba(16, 185, 129, 0.1);
  --success-strong: #064e3b;

  --warning: #92400e;
  --warning-glow: rgba(245, 158, 11, 0.1);

  --danger: #b91c1c;
  --danger-glow: rgba(239, 68, 68, 0.1);

  /* Legacy aliases (for inline styles) */
  --ok: var(--success);
  --err: var(--danger);
  --bg-panel: var(--panel);
  --fg: var(--text);
  --surface: var(--panel-hover);
  /* Used by ~40 templates and 5 rules in this file, and undefined until
     2026-08-28, so every "muted" caption on the site (the Messages inbox
     metadata among them) was rendering at full body-text color. */
  --muted: var(--text-muted);

  /* Was #f97316, which is 2.80:1 on white and fails SC 1.4.3. --streak is used
     as TEXT color everywhere except one decorative gradient, so darkening it
     fixes the contrast without changing any fill. #c2410c is 5.20:1. */
  --streak: #c2410c;
  --streak-glow: rgba(249, 115, 22, 0.1);

  /* Nav count badge. Light theme: white on deep red. */
  --badge-bg: var(--danger);
  --badge-fg: #ffffff;

  /* Borders */
  --border: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.15);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Timing */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Content width for readability */
  --content-width: 720px;
  --container-width: 1000px;
}

/* ─── Dark Mode ────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Core palette - deep midnight with electric accents */
  --bg: #0a0c10;
  --bg-elevated: #12151c;
  --panel: #161a24;
  --panel-hover: #1c212e;

  /* Text hierarchy - WCAG AA compliant */
  --text: #f0f4fc;
  --text-secondary: #b0b8c9;  /* 7.2:1 contrast on #0a0c10 */
  --text-muted: #8b95a8;      /* 4.8:1 contrast on #0a0c10 */

  /* Accent colors */
  --accent: #6c9fff;
  --accent-glow: rgba(108, 159, 255, 0.15);
  --accent-strong: #4d8bff;

  /* Semantic colors */
  --success: #34d399;
  --success-glow: rgba(52, 211, 153, 0.12);
  --success-strong: #10b981;

  --warning: #fbbf24;
  --warning-glow: rgba(251, 191, 36, 0.12);

  --danger: #f87171;
  --danger-glow: rgba(248, 113, 113, 0.12);

  /* Legacy aliases (for inline styles) */
  --ok: var(--success);
  --err: var(--danger);
  --bg-panel: var(--panel);
  --fg: var(--text);
  --surface: var(--panel-hover);
  --muted: var(--text-muted);

  --streak: #fb923c;
  --streak-glow: rgba(251, 146, 60, 0.15);

  /* Dark theme --danger is a light red, so the badge takes dark text on it
     (6.2:1) rather than the white used in the light theme. */
  --badge-bg: var(--danger);
  --badge-fg: #3b0a0a;

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-strong);
}

/* ─── Focus States ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ─── Layout ───────────────────────────────────────────────── */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px;
}

@media (min-width: 1024px) {
  .container {
    max-width: 1000px;
    padding: 24px;
  }
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── Top Bar ──────────────────────────────────────────────── */
.topbar {
  background: var(--panel);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 8px 0;
}

.topbar .container {
  padding-top: 4px;
  padding-bottom: 4px;
}

.brand {
  flex-shrink: 0;
}

.brand a {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  /* WCAG 2.2 SC 2.5.8: standalone (non-prose) targets need >= 24x24. The
     text alone rendered 23px tall. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.brand a:hover {
  color: var(--accent);
}

.nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none; /* Hide scrollbar Firefox */
  -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
  padding: 4px 0;
  margin: 0 -4px;
  flex: 1 1 100%; /* Take full width on mobile */
  order: 3;
}

.nav::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome/Safari */
}

@media (min-width: 768px) {
  .nav {
    flex: 1 1 100%;
    order: 3;
    margin: 0;
  }

  .auth {
    order: 2;
    margin-left: auto;
  }
}

/* A feature-rich student header cannot fit inside the site's 1000px content
   column. At ordinary laptop widths, keep the utility controls beside the
   brand and give navigation its own row. On wide screens, use a wider header
   container and keep all three groups on one line; navigation scrolls before
   the utility controls are allowed to wrap. */
@media (min-width: 1280px) {
  .topbar .container {
    max-width: 1440px;
  }

  .topbar .container.row {
    flex-wrap: nowrap;
  }

  .nav {
    flex: 1 1 auto;
    min-width: 0;
    order: 2;
  }

  .auth {
    order: 3;
    margin-left: 0;
  }
}

.nav a {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nav a:hover {
  color: var(--text);
  background: var(--panel-hover);
}

.nav a.active {
  color: var(--accent);
  background: var(--accent-glow);
}

/* Nav link with badge */
.nav-link-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 700;
  /* Not #fff on var(--danger): the dark theme's --danger is a LIGHT red
     (#f87171) and white on it is 2.77:1. These two tokens flip the foreground
     with the theme instead, so both directions clear 4.5:1. */
  color: var(--badge-fg);
  background: var(--badge-bg);
  border-radius: 9px;
}

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

/* ─── User Menu ─────────────────────────────────────────────── */
.user-menu {
  position: relative;
}

.user-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.user-menu-toggle:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  max-width: calc(100vw - 32px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
  z-index: 1000;
}

.user-menu.open .user-menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-header {
  padding: 12px 16px;
}

.user-menu-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.user-menu-username {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.user-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

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

.user-menu-logout {
  color: var(--danger);
}

/* ─── Panels ───────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin: 12px 0;
  transition: border-color var(--transition-fast);
}

@media (min-width: 768px) {
  .panel {
    padding: 24px;
    margin: 16px 0;
  }
}

.panel:hover {
  border-color: var(--border-hover);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* ─── Typography ───────────────────────────────────────────── */
.h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  line-height: 1.2;
}

.h2 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .h1 { font-size: 2rem; }
  .h2 { font-size: 1.25rem; }
}

.muted {
  color: var(--text-secondary);
}

.text-sm {
  font-size: 0.875rem;
}

/* ─── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--bg);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  touch-action: manipulation;
}

@media (min-width: 768px) {
  .btn {
    padding: 12px 20px;
  }
}

.btn:hover {
  background: var(--accent-strong);
  color: var(--bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 8px;
}

.btn-lite {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-lite:hover {
  background: var(--panel-hover);
  border-color: var(--border-hover);
  color: var(--text);
}

.btn-ok {
  background: var(--success);
  color: var(--bg);
}

.btn-ok:hover {
  background: var(--success-strong);
  color: var(--bg);
}

.btn-danger {
  background: var(--danger);
  color: var(--bg);
}

.btn-danger:hover {
  background: var(--danger);
  color: var(--bg);
}

.btn-warn {
  background: var(--warning);
  color: var(--bg);
}

.btn-warn:hover {
  background: var(--warning);
  color: var(--bg);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
}

@media (max-width: 480px) {
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-row .btn {
    width: 100%;
  }
}

/* ─── Forms ────────────────────────────────────────────────── */
form p {
  margin: 14px 0;
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}

input, textarea, select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

/* The rule above is written for text fields, and a checkbox is not one: it was
   inheriting width:100% and 14px of padding, so every raw checkbox on the site
   rendered as a full-width block with its label pushed onto the next line.
   `.filter-checkbox input[type="checkbox"]` existed to undo this one page at a
   time. Excluded here so a plain checkbox looks right by default. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  padding: 0;
  border-radius: 0;
  accent-color: var(--accent);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  background: rgba(108, 159, 255, 0.05);
  outline: none;
}

/* Style select dropdown options for readability */
select option {
  background: var(--bg-elevated);
  color: var(--text);
  padding: 12px 16px;
}

select option:checked,
select option[selected] {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 600;
}

select option:hover {
  background: rgba(108, 159, 255, 0.1);
}

textarea {
  min-height: 200px;
  resize: vertical;
  line-height: 1.6;
}

/* ─── Flash Messages ───────────────────────────────────────── */
.flash {
  padding: 14px 18px;
  border-radius: 12px;
  margin: 12px 0;
  border: 1px solid var(--border);
  background: var(--panel);
  font-weight: 500;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.flash.error {
  border-color: var(--danger);
  background: var(--danger-glow);
  color: var(--danger);
}

.flash.success {
  border-color: var(--success);
  background: var(--success-glow);
  color: var(--success);
}

.flash.warning {
  border-color: var(--warning);
  background: var(--warning-glow);
  color: var(--warning);
}

.flash.info {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}

/* ─── Pills & Badges ───────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
}

/* ─── Done Badge - Satisfying Green ────────────────────────── */
.badge-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(52, 211, 153, 0.3);
  animation: badgePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.badge-done::before {
  content: '✓';
  font-weight: 700;
}

@keyframes badgePop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.badge-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

.badge-pending::after {
  content: '→';
  opacity: 0.6;
}

/* ─── Tables ───────────────────────────────────────────────── */
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
  border-radius: 12px;
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px; /* Force scroll on small screens */
}

@media (min-width: 768px) {
  .table-container {
    border: none;
    margin: 0;
  }
  table {
    min-width: 100%;
  }
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Row headers (th scope="row") label a row of data, not a column. They keep the
   appearance of a normal body cell -- the styling above is for column headers. */
tbody th {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-transform: none;
  letter-spacing: normal;
}

tbody tr {
  transition: background var(--transition-fast);
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* ─── Concept Feed ─────────────────────────────────────────── */
.concept-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.concept-detail-panel {
  padding: 24px;
}

@media (min-width: 768px) {
  .concept-detail-panel {
    padding: 40px;
  }
}

.concept-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 480px) {
  .concept-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.concept-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all var(--transition-normal);
  text-decoration: none;
  color: inherit;
}

.concept-card:hover {
  transform: translateX(6px);
  border-color: var(--accent);
  background: var(--panel-hover);
  box-shadow: var(--shadow-md);
}

.concept-card.completed {
  border-color: rgba(52, 211, 153, 0.3);
  opacity: 0.85;
}

.concept-card.completed:hover {
  border-color: var(--success);
  opacity: 1;
}

.concept-order {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid rgba(108, 159, 255, 0.2);
}

@media (min-width: 768px) {
  .concept-order {
    width: 56px;
    height: 56px;
    font-size: 1.1rem;
  }
}

.concept-card:not(.completed) .concept-order {
  /* Inherits base styles */
}

.concept-card.completed .concept-order {
  background: var(--success-glow);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.concept-body {
  flex: 1;
  min-width: 0;
}

.concept-body .h2 {
  margin: 0 0 4px;
}

.concept-body p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concept-status {
  flex-shrink: 0;
}

/* ─── Progress Bars ────────────────────────────────────────── */
.progress-container {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  height: 10px;
  margin: 12px 0;
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar.done {
  background: linear-gradient(90deg, var(--success) 0%, var(--success-strong) 100%);
}

/* ─── Gamification & Stats ─────────────────────────────────── */
.stats-overview-panel {
  background: linear-gradient(135deg, var(--panel) 0%, var(--bg-elevated) 100%);
}

.stats-overview-row {
  display: flex;
  margin-bottom: 20px;
  gap: 12px;
}

@media (max-width: 480px) {
  .stats-overview-row {
    flex-wrap: wrap;
  }
}

.stat-overview-item {
  text-align: center;
  flex: 1;
  min-width: 80px;
}

.stat-overview-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .stat-overview-value {
    font-size: 2.5rem;
  }
}

.stat-overview-value.level { color: var(--accent); }
.stat-overview-value.streak { color: var(--streak); }
.stat-overview-value.xp { color: var(--success); }

.next-level-target {
  float: right;
}

@media (max-width: 480px) {
  .next-level-target {
    float: none;
    display: block;
    margin-top: 4px;
  }
}

.streak-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--streak-glow);
  color: var(--streak);
  font-weight: 700;
  font-size: 1rem;
}

.xp-tag {
  color: var(--success);
  font-weight: 700;
  font-size: 0.9rem;
}

.level-badge {
  background: var(--accent);
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.75rem;
  vertical-align: middle;
  margin-left: 6px;
}

/* ─── Quiz UI ──────────────────────────────────────────────── */
.quiz-container {
  max-width: 720px;
  margin: 0 auto;
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.quiz-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.quiz-progress-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quiz-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: all var(--transition-fast);
}

.quiz-progress-dot.answered {
  background: var(--accent);
}

.quiz-progress-dot.current {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.question-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  margin: 20px 0;
  transition: border-color var(--transition-fast);
}

.question-card:focus-within {
  border-color: var(--accent);
}

.question-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.question-text {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* Modern Radio Buttons */
.answer-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.answer-option {
  position: relative;
}

.answer-option input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

.answer-option label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.answer-option label::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.answer-option:hover label {
  border-color: var(--accent);
  background: rgba(108, 159, 255, 0.05);
}

.answer-option input:checked + label {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.answer-option input:checked + label::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--bg);
}

.answer-option input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Quiz Results */
.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 1.1rem;
  font-weight: 700;
}

.result-badge.correct {
  background: var(--success-glow);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.result-badge.incorrect {
  background: var(--danger-glow);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.score-display {
  text-align: center;
  padding: 32px;
  background: linear-gradient(135deg, var(--panel) 0%, var(--bg-elevated) 100%);
  border-radius: 20px;
  margin: 24px 0;
}

.score-big {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--success) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.score-label {
  font-size: 1.1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ─── Flashcard UI ─────────────────────────────────────────── */
.flashcard-container {
  max-width: 640px;
  margin: 0 auto;
}

.flashcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cards-remaining {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}

.flashcard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 36px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
}

.flashcard:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.flashcard-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.flashcard-content {
  font-size: 1.35rem;
  line-height: 1.6;
  font-weight: 500;
  flex: 1;
}

.flashcard-divider {
  height: 1px;
  background: var(--border);
  margin: 28px 0;
}

.flashcard-answer {
  animation: fadeSlideUp 0.3s ease;
}

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

.rating-buttons {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.rating-btn {
  flex: 1;
  padding: 16px 20px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

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

.rating-btn.again {
  background: var(--danger-glow);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.rating-btn.again:hover {
  background: var(--danger);
  color: white;
}

.rating-btn.good {
  background: var(--success-glow);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.rating-btn.good:hover {
  background: var(--success);
  color: white;
}

.rating-btn.easy {
  background: var(--warning-glow);
  color: var(--warning);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.rating-btn.easy:hover {
  background: var(--warning);
  color: var(--bg);
}

.rating-subtitle {
  font-size: 0.75rem;
  opacity: 0.7;
  font-weight: 500;
}

/* Flashcard Celebration */
.celebration {
  text-align: center;
  padding: 48px 32px;
}

.celebration-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.celebration h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.celebration p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.stats-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 24px 0;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ─── Writing UI ───────────────────────────────────────────── */
.writing-container {
  max-width: 800px;
  margin: 0 auto;
}

.prompt-card {
  background: linear-gradient(135deg, var(--panel) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 24px;
}

.prompt-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.prompt-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.prompt-text p {
  margin-bottom: 1.25em;
}

.prompt-text p:last-child {
  margin-bottom: 0;
}

.existing-submission-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--accent-glow);
  border: 1px solid rgba(108, 159, 255, 0.2);
  margin-bottom: 20px;
}

.existing-submission-notice .icon {
  font-size: 1.5rem;
}

/* ─── Activity Cards ───────────────────────────────────────── */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.activity-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: all var(--transition-fast);
}

.activity-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.activity-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.activity-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.activity-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.activity-value.success {
  color: var(--success);
}

.activity-value.accent {
  color: var(--accent);
}

/* ─── AI Results ───────────────────────────────────────────── */
.ai-result-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

@media (max-width: 480px) {
  .ai-result-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

.ai-progress-col {
  flex: 1;
}

.ai-score-col {
  min-width: 80px;
  text-align: right;
}

@media (max-width: 480px) {
  .ai-score-col {
    text-align: left;
  }
}

.ai-score-value {
  font-size: 1.3rem;
  font-weight: 700;
}

.ai-score-value.flagged { color: var(--warning); }
.ai-score-value.clean { color: var(--success); }

/* ─── Footer ───────────────────────────────────────────────── */
.footer {
  padding: 32px 0 48px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* WCAG 2.2 SC 2.5.8. Footer links rendered 17px tall; they are standalone
   navigation, not links inside a sentence, so the prose exception does not
   apply to them. */
.footer a {
  display: inline-block;
  min-height: 24px;
  padding: 4px 6px;
}

.footer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer a:hover {
  color: var(--accent-strong);
}

/* ─── Utility Classes ──────────────────────────────────────── */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }

/* ─── Mobile Responsiveness ────────────────────────────────── */
@media (max-width: 480px) {
  .quiz-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .quiz-progress {
    width: 100%;
    justify-content: space-between;
  }
}

/* ─── Accessibility ─────────────────────────────────────────── */

/* Skip link - visible on focus for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  /* Not var(--accent): in the dark theme that resolves to #6c9fff, and white
     on it measures 2.61:1 against the 4.5:1 required by SC 1.4.3. This is the
     first control a keyboard user reaches, so it gets a fixed high-contrast
     pair that holds in both themes (15.6:1). */
  background: #10243f;
  color: #ffffff;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  transition: top 0.2s ease;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  /* Was outline:none. The link only exists while focused, so suppressing its
     focus ring removed the only indicator it ever shows. */
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

.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;
}

/* Reset fieldset for semantic radio groups */
fieldset.answer-options,
fieldset.mc-options {
  border: none;
  padding: 0;
  margin: 0;
}

/* ─── Theme Toggle ──────────────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border-color: var(--border-hover);
}

[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Show sun in dark mode, moon in light mode */
.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* ─── Reading Content (Improved Readability) ─────────────────── */
.reading-content {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
  font-size: 1.05rem;
}

.reading-content p {
  margin-bottom: 1.25em;
}

/* Markdown-rendered content styles */
.markdown-content {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
  font-size: 1.05rem;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  font-weight: 600;
  line-height: 1.3;
}

.markdown-content h1 { font-size: 1.75rem; }
.markdown-content h2 { font-size: 1.4rem; }
.markdown-content h3 { font-size: 1.2rem; }
.markdown-content h4 { font-size: 1.1rem; }

.markdown-content p {
  margin-bottom: 1.25em;
}

.markdown-content ul,
.markdown-content ol {
  margin-bottom: 1.25em;
  padding-left: 1.5em;
}

.markdown-content li {
  margin-bottom: 0.5em;
}

.markdown-content strong {
  font-weight: 600;
  color: var(--text);
}

.markdown-content em {
  font-style: italic;
}

.markdown-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.markdown-content pre {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1em;
  overflow-x: auto;
  margin-bottom: 1.25em;
}

.markdown-content pre code {
  padding: 0;
  background: none;
  border: none;
}

.markdown-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1em;
  margin: 1.25em 0;
  color: var(--text-secondary);
  font-style: italic;
}

.markdown-content table {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25em;
}

.markdown-content th,
.markdown-content td {
  padding: 0.75em;
  text-align: left;
  border: 1px solid var(--border);
}

.markdown-content th {
  background: var(--bg-elevated);
  font-weight: 600;
}

.markdown-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

.markdown-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1em 0;
  display: block;
}

/* ─── Breadcrumbs ───────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.breadcrumb a {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--accent);
}

/* ─── Form Improvements ─────────────────────────────────────── */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}

.form-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 6px;
  margin-bottom: 0;
}

.help-text {
  margin-top: 6px;
  margin-bottom: 0;
}

/* ─── Filter Bar ────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.filter-form {
  display: flex;
  align-items: center;
  gap: 16px;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.filter-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ─── Badges ────────────────────────────────────────────────── */
.badge-warning {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--warning-glow);
  color: var(--warning);
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--success-glow);
  color: var(--success);
  font-size: 0.8rem;
  font-weight: 600;
}

/* ─── Teacher Submissions ───────────────────────────────────── */
.submission-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.flagged-row {
  background: var(--warning-glow);
}

.submission-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.submission-text {
  padding: 20px;
  background: var(--bg-elevated);
  border-radius: 12px;
  line-height: 1.8;
  margin-top: 16px;
}

.panel-warning {
  border-color: var(--warning);
  background: var(--warning-glow);
}

/* ─── Empty States ──────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-state h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ─── Character Counter ─────────────────────────────────────── */
.char-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.char-counter.warning {
  color: var(--warning);
}

.char-counter.error {
  color: var(--danger);
}

/* ─── Loading States ────────────────────────────────────────── */
.btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  left: 50%;
  top: 50%;
  margin-left: -9px;
  margin-top: -9px;
}

.btn.loading::after {
  border-top-color: var(--bg);
}

.btn-lite.loading::after {
  border-top-color: var(--text);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Smooth Reveal Animation ───────────────────────────────── */
.reveal-animation {
  animation: revealSlide 0.3s ease-out;
}

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

/* ─── Progress Bar Warning State ────────────────────────────── */
.progress-bar.warning {
  background: linear-gradient(90deg, var(--warning) 0%, #f59e0b 100%);
}

/* ─── Keyboard Hints ────────────────────────────────────────── */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .kbd {
    display: none;
  }
}

/* ─── Warning Banner ────────────────────────────────────────── */
.warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: var(--warning-glow);
  border: 1px solid var(--warning);
  border-radius: 12px;
  color: var(--text);
}

.warning-banner-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.warning-banner-content {
  flex: 1;
}

.warning-banner-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.warning-banner-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

.warning-banner a {
  color: var(--accent);
  font-weight: 500;
}

/* ─── Info Banner ───────────────────────────────────────────── */
.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: var(--text);
}

.info-banner-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

/* ─── Section Detail Page ───────────────────────────────────── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.section-header h1 {
  margin: 0;
  font-size: 1.75rem;
}

.due-date {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.due-date.overdue {
  color: var(--danger);
}

.mark-read-form {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.read-badge {
  margin-top: 24px;
  padding: 12px;
  background: var(--accent-glow);
  border-radius: 8px;
  color: var(--accent);
  text-align: center;
}

/* ─── Mastery Check Cards ───────────────────────────────────── */
.mastery-checks {
  margin-top: 32px;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.mastery-checks h2 {
  font-size: 1.25rem;
  margin-bottom: 16px;
}

.mastery-check-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.mastery-check-card.passed {
  border-color: var(--success);
  background: var(--success-glow);
}

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

.check-title {
  font-weight: 600;
  font-size: 1.1rem;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-badge.success {
  background: var(--success);
  color: white;
}

.status-badge.warning {
  background: var(--warning);
  color: #333;
}

.status-badge.info {
  background: #3b82f6;
  color: white;
}

.check-prompt {
  margin-bottom: 16px;
  color: var(--text);
}

.check-prompt p {
  margin-bottom: 1em;
}

.check-prompt p:last-child {
  margin-bottom: 0;
}

.word-limit {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Previous response - subtle, collapsed feel */
.previous-response {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  opacity: 0.85;
}

.previous-response h4 {
  margin: 0 0 6px 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.prev-text {
  font-size: 0.9rem;
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Grader feedback - prominent card that stands out */
.grader-feedback {
  background: var(--warning-glow);
  border: 1px solid var(--warning);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.grader-feedback h4 {
  margin: 0 0 8px 0;
  font-size: 0.8rem;
  color: var(--warning);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.grader-feedback .feedback-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

.grader-feedback.ai-flagged {
  background: var(--danger-glow);
  border-color: var(--danger);
}

.grader-feedback.ai-flagged h4 {
  color: var(--danger);
}

/* Legacy class for backwards compatibility */
.previous-attempt {
  background: var(--warning-glow);
  border: 1px solid var(--warning);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.previous-attempt h4 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
}

.feedback {
  font-size: 0.9rem;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.feedback.ai-flagged {
  color: var(--warning);
}

.check-locked,
.cooldown-notice {
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  text-align: center;
}

.cooldown-notice {
  background: var(--warning-glow);
}

.check-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
  min-height: 150px;
}

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

.form-actions.is-grading {
  flex-direction: column;
  align-items: center;
}

/* ─── Submit Button Loading State ────────────────────────────── */
.submit-btn {
  position: relative;
  min-width: 140px;
  overflow: hidden;
}

/* Faded + inert until the response reaches the word floor (set by JS). */
.submit-btn.not-ready {
  opacity: 0.45;
  cursor: not-allowed;
}

.submit-btn .btn-spinner,
.submit-btn .btn-loading-text {
  display: none;
}

.submit-btn.is-loading {
  pointer-events: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
}

.submit-btn.is-loading .btn-text {
  display: none;
}

.submit-btn.is-loading .btn-spinner,
.submit-btn.is-loading .btn-loading-text {
  display: inline-flex;
  align-items: center;
}

.submit-btn .btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
  margin-right: 8px;
}

@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}

.submit-btn .btn-loading-text {
  font-size: 0.9rem;
  animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Shimmer effect on button while loading */
.submit-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: loadingShimmer 1.5s ease-in-out infinite;
}

@keyframes loadingShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Loading dots animation */
.loading-dots::after {
  content: '';
  animation: loadingDots 1.5s steps(4, end) infinite;
}

@keyframes loadingDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

/* Grading time estimate note — hidden until loading */
.grading-note {
  display: none;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 8px;
  margin-bottom: 0;
  text-align: center;
  width: 100%;
}

.form-actions.is-grading .grading-note {
  display: block;
}

/* Rotating whimsical "thinking" line — fades in on each message swap */
.grading-flavor {
  display: inline-block;
  animation: flavorFadeIn 0.4s ease;
}

.grading-flavor::after {
  content: '\2026'; /* … */
}

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

@media (prefers-reduced-motion: reduce) {
  .grading-flavor { animation: none; }
}

/* Slow grading warning — hidden until JS shows it */
.grading-slow-warning {
  display: none;
  color: #b45309;
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 0.85rem;
  text-align: center;
  width: 100%;
}

/* ─── Hypnotic grading blob ───────────────────────────────────
   Shows only while grading, above the rotating flavor line.
   Default: a gooey rotating blob (works in every browser).
   Where clip-path: shape() is supported: a wobbling squircle with
   a rotating conic swirl. Reduced-motion users get a gentle pulse. */
.grading-blob {
  display: none;
  width: 52px;
  height: 52px;
  margin: 6px auto 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: gradingBlobMorph 3.5s ease-in-out infinite, gradingBlobSpin 5s linear infinite;
}

.form-actions.is-grading .grading-blob {
  display: block;
}

@keyframes gradingBlobMorph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

@keyframes gradingBlobSpin {
  to { transform: rotate(360deg); }
}

@supports (clip-path: shape(from 0 0, line to 0 0)) {
  .grading-blob {
    border-radius: 0;
    background: none;
    border-image: conic-gradient(var(--accent), #93c5fd, var(--accent-strong), var(--accent)) fill 0//999px;
    animation: gradingBlobWobble 1s alternate infinite linear(0, 0.013, 0.053 1%, 0.212 2.1%, 1.035 5.7%, 1.293, 1.446 8.3%, 1.487, 1.505 9.6%, 1.503, 1.486 10.6%, 1.406 11.8%, 0.979 15.5%, 0.848, 0.774 18.1%, 0.754, 0.745, 0.746, 0.754 20.3%, 0.794 21.5%, 1.011 25.2%, 1.077 26.6%, 1.114 27.8%, 1.124, 1.129, 1.129, 1.124 30.1%, 1.104 31.2%, 0.994 35%, 0.961, 0.942, 0.935 38.7%, 0.936, 0.944 40.6%, 1.015 45.7%, 1.028, 1.033 48.4%, 1.028 50.4%, 0.992 55.4%, 0.986, 0.983 58.1%, 0.986 60.1%, 1.004 65.1%, 1.008 67.8%, 0.996 77.3%, 1.002 87.1%, 0.999), gradingBlobSwirl 4s linear infinite;
  }

  @keyframes gradingBlobWobble {
    0% { clip-path: shape(from 85.0242216976% 60.8470934779%, curve to 80.3178442208% 70.6199870088% with 95.0484433951% 71.6941869559%, curve to 63.3566458721% 84.1460913354% with 65.5872450465% 69.5457870617%, curve to 52.7815116745% 86.5597967068% with 61.1260466978% 98.7463956091%, curve to 31.6312432791% 81.732385964% with 44.4369766511% 74.3731978045%, curve to 23.1506441048% 74.9693338007% with 18.8255099071% 89.0915741234%, curve to 13.7378891512% 55.423546739% with 27.4757783024% 60.8470934779%, curve to 13.7378891512% 44.576453261% with 0% 50%, curve to 23.1506441048% 25.0306661993% with 27.4757783024% 39.1529065221%, curve to 31.6312432791% 18.267614036% with 18.8255099071% 10.9084258766%, curve to 52.7815116745% 13.4402032932% with 44.4369766511% 25.6268021955%, curve to 63.3566458721% 15.8539086646% with 61.1260466978% 1.2536043909%, curve to 80.3178442208% 29.3800129912% with 65.5872450465% 30.4542129383%, curve to 85.0242216976% 39.1529065221% with 95.0484433951% 28.3058130441%, curve to 85.0242216976% 60.8470934779% with 75% 50%); }
    to { clip-path: shape(from 86.2621108488% 55.423546739%, curve to 76.8493558952% 74.9693338007% with 72.5242216976% 60.8470934779%, curve to 68.3687567209% 81.732385964% with 81.1744900929% 89.0915741234%, curve to 47.2184883255% 86.5597967068% with 55.5630233489% 74.3731978045%, curve to 36.6433541279% 84.1460913354% with 38.8739533022% 98.7463956091%, curve to 19.6821557792% 70.6199870088% with 34.4127549535% 69.5457870617%, curve to 14.9757783024% 60.8470934779% with 4.9515566049% 71.6941869559%, curve to 14.9757783024% 39.1529065221% with 25% 50%, curve to 19.6821557792% 29.3800129912% with 4.9515566049% 28.3058130441%, curve to 36.6433541279% 15.8539086646% with 34.4127549535% 30.4542129383%, curve to 47.2184883255% 13.4402032932% with 38.8739533022% 1.2536043909%, curve to 68.3687567209% 18.267614036% with 55.5630233489% 25.6268021955%, curve to 76.8493558952% 25.0306661993% with 81.1744900929% 10.9084258766%, curve to 86.2621108488% 44.576453261% with 72.5242216976% 39.1529065221%, curve to 86.2621108488% 55.423546739% with 100% 50%); }
  }

  @keyframes gradingBlobSwirl {
    to { transform: rotate(360deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .grading-blob {
    border-image: none;
    clip-path: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: gradingBlobPulse 1.6s ease-in-out infinite;
  }
}

@keyframes gradingBlobPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.passed-message {
  padding: 12px;
  background: var(--success-glow);
  border-radius: 8px;
  color: var(--success);
  text-align: center;
}

.practice-closed-check {
  margin-top: 12px;
  margin-bottom: 0;
}

.practice-closed-check p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.passed-message .your-response {
  margin-top: 12px;
  text-align: left;
  color: var(--text-secondary);
}

.passed-message .your-response summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--success);
}

.passed-message .your-response summary:hover {
  text-decoration: underline;
}

.passed-message .response-text {
  margin-top: 12px;
  padding: 12px;
  background: var(--panel);
  border-radius: 6px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}

.passed-message .response-feedback {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ─── Flashcard Prompt ───────────────────────────────────────── */
.flashcard-prompt {
  margin-top: 24px;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  background: var(--accent-glow);
  border-color: var(--accent);
}

.flashcard-prompt-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.flashcard-prompt-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.flashcard-prompt-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flashcard-prompt-text strong {
  color: var(--accent);
}

@media (max-width: 480px) {
  .flashcard-prompt-content {
    flex-direction: column;
    text-align: center;
  }

  .flashcard-prompt-text {
    align-items: center;
  }
}

.nav-buttons {
  margin-top: 32px;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .nav-buttons {
    flex-direction: column;
  }

  .nav-buttons .btn {
    width: 100%;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   Dopamine Enhancers - Satisfying Micro-interactions
   ═══════════════════════════════════════════════════════════ */

/* ─── Smooth Page Entrance ──────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Staggered entrance for lists */
.panel,
.activity-card,
.section-item,
.mastery-check-card,
.concept-card {
  animation: fadeInUp 0.4s ease backwards;
}

.panel:nth-child(1) { animation-delay: 0.05s; }
.panel:nth-child(2) { animation-delay: 0.1s; }
.panel:nth-child(3) { animation-delay: 0.15s; }
.panel:nth-child(4) { animation-delay: 0.2s; }

.section-item:nth-child(1) { animation-delay: 0.05s; }
.section-item:nth-child(2) { animation-delay: 0.1s; }
.section-item:nth-child(3) { animation-delay: 0.15s; }
.section-item:nth-child(4) { animation-delay: 0.2s; }
.section-item:nth-child(5) { animation-delay: 0.25s; }

/* ─── Interactive Element Polish ────────────────────────────── */

/* Buttons with satisfying press */
.btn {
  transition: all var(--transition-fast);
  transform: translateY(0);
}

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

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Cards lift on hover */
.activity-card,
.section-item,
.concept-card,
.mc-option {
  transition: all var(--transition-fast);
}

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

.section-item:not(.locked):hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

/* ─── Success Celebration Animation ─────────────────────────── */
@keyframes successPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes checkmark {
  0% {
    stroke-dashoffset: 50;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes successGlow {
  0% { box-shadow: 0 0 0 0 var(--success-glow); }
  50% { box-shadow: 0 0 20px 10px var(--success-glow); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.success-pop {
  animation: successPop 0.3s ease;
}

.success-glow {
  animation: successGlow 0.6s ease;
}

/* Flashcard correct answer celebration */
.feedback-result.correct {
  animation: scaleIn 0.3s ease, successGlow 0.6s ease 0.1s;
}

.feedback-result.correct .feedback-icon {
  animation: successPop 0.4s ease 0.15s;
}

/* ─── Progress Bar Animations ───────────────────────────────── */
.progress-bar {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Animated progress with shine effect */
@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progressShine 2s ease-in-out infinite;
}

.progress-bar-container {
  position: relative;
  overflow: hidden;
}

/* ─── Status Badge Animations ───────────────────────────────── */
.badge.done,
.badge-done,
.status-badge.success {
  position: relative;
  overflow: hidden;
}

/* ─── Streak Fire Animation ─────────────────────────────────── */
@keyframes fireFlicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.05) rotate(-2deg); }
  75% { transform: scale(0.98) rotate(2deg); }
}

.streak-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.streak-mini:hover {
  animation: fireFlicker 0.5s ease infinite;
}

/* ─── Level Badge Shine ─────────────────────────────────────── */
@keyframes levelShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─── Checkbox/Radio Selection Animation ────────────────────── */
.mc-option {
  position: relative;
  overflow: hidden;
}

.mc-option::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--success-glow);
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
  border-radius: inherit;
  pointer-events: none;
}

.mc-option:has(input:checked)::after {
  opacity: 1;
  transform: scale(1);
}

.mc-option input:checked + .mc-option-text {
  font-weight: 500;
}

/* ─── Reading Progress Indicator ────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--success));
  z-index: 1001;
  transition: width 0.1s linear;
}

/* ─── Smooth Number Counter ─────────────────────────────────── */
.stat-overview-value {
  font-variant-numeric: tabular-nums;
  transition: all 0.3s ease;
}

.stat-overview-value.level {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.stat-overview-value.streak {
  color: var(--streak);
}

.stat-overview-value.xp {
  color: var(--success);
}

/* ─── Flash Message Animations ──────────────────────────────── */
.flash {
  animation: slideInDown 0.4s ease;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Success flash gets extra celebration */
.flash.success {
  border-left: 4px solid var(--success);
}

/* ─── Typing/Text Area Focus ────────────────────────────────── */
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  transition: all var(--transition-fast);
}

/* ─── Link Underline Animation ──────────────────────────────── */
.markdown-content a {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.markdown-content a:hover {
  background-size: 100% 2px;
}

/* ─── Skeleton Loading (for future use) ─────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--panel) 25%,
    var(--panel-hover) 50%,
    var(--panel) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* ─── Completed Section Checkmark ───────────────────────────── */
.status-icon.done {
  position: relative;
}

.status-icon.done::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--success);
  opacity: 0;
  animation: ringPulse 2s ease infinite;
}

@keyframes ringPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.3;
  }
}

/* ─── Smooth Scroll Behavior ────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ─── Focus Visible for Accessibility ───────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Word Count Live Feedback ──────────────────────────────── */
.word-count-display {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

.word-count-display.in-range {
  color: var(--success);
}

.word-count-display.over-limit {
  color: var(--warning);
}

/* Word limit warning message */
.word-limit-warning {
  font-size: 0.85rem;
  color: var(--warning);
  background: rgba(251, 191, 36, 0.1);
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
  border-left: 3px solid var(--warning);
}

/* Form error container (accessible error messages) */
.form-error-container {
  display: none;
  padding: 12px 16px;
  margin-top: 8px;
  background: var(--danger-glow);
  border: 1px solid var(--danger);
  border-radius: 8px;
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   XP Toast Animation System - Tangible Reward Feedback
   ═══════════════════════════════════════════════════════════ */

/* XP Toast that floats up and "collects" into the topbar */
.xp-toast {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--success);
  text-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  animation: xpFloat 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  display: flex;
  align-items: center;
  gap: 4px;
}

.xp-toast::before {
  content: '+';
}

.xp-toast::after {
  content: ' XP';
  font-size: 0.9em;
  opacity: 0.9;
}

@keyframes xpFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(-20px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(0.8);
  }
}

/* Level badge pulse when XP is earned */
.level-badge.xp-pulse {
  animation: levelPulse 0.6s ease;
}

@keyframes levelPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 12px var(--accent); }
}

/* ─── Session XP Counter ────────────────────────────────────── */
.session-xp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--success-glow);
  color: var(--success);
  font-weight: 700;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.session-xp:hover {
  background: var(--success);
  color: white;
}

.session-xp-value {
  font-variant-numeric: tabular-nums;
}

/* Pop animation when session XP increases */
.session-xp.xp-bump {
  animation: sessionBump 0.4s ease;
}

@keyframes sessionBump {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ─── Level Progress Ring ───────────────────────────────────── */
.level-progress-ring {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.level-ring-svg {
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
}

.level-ring-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}

.level-ring-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.level-ring-text {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
}

/* Glow effect when progress increases */
.level-progress-ring.progress-bump .level-ring-progress {
  filter: drop-shadow(0 0 4px var(--accent));
}

/* ─── Combo/Streak Multiplier ───────────────────────────────── */
.combo-display {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--streak) 0%, #ef4444 100%);
  color: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.combo-display.visible {
  opacity: 1;
  transform: translateX(0);
}

.combo-display.combo-bump {
  animation: comboBump 0.3s ease;
}

@keyframes comboBump {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.combo-count {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.combo-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.combo-bonus {
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

/* Combo fire particles */
.combo-display::before {
  content: '🔥';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 1.5rem;
  animation: fireFloat 1s ease-in-out infinite;
}

@keyframes fireFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-4px) rotate(5deg); }
}

/* Hide combo on mobile if it's too intrusive */
@media (max-width: 480px) {
  .combo-display {
    top: auto;
    bottom: 80px;
    right: 10px;
    padding: 8px 14px;
  }

  .combo-count {
    font-size: 1.5rem;
  }
}

/* ─── Sound Toggle Button ───────────────────────────────────── */
.sound-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.sound-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border-color: var(--border-hover);
}

[data-theme="dark"] .sound-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sound-toggle svg {
  width: 18px;
  height: 18px;
}

.sound-toggle .icon-sound-off {
  display: none;
}

.sound-toggle.muted .icon-sound-on {
  display: none;
}

.sound-toggle.muted .icon-sound-off {
  display: block;
}

.sound-toggle.muted {
  opacity: 0.5;
}

/* Bug Report System */
.report-issue-section {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.report-help-text {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.report-status-pending,
.report-status-resolved {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.report-status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.report-status-resolved {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  background: rgba(34, 197, 94, 0.1);
  color: #059669;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.report-status-resolved .teacher-note {
  margin: 4px 0 0 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--fg);
}

.report-status-rejected {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  background: rgba(107, 114, 128, 0.1);
  color: var(--fg);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.report-status-rejected .teacher-note {
  margin: 8px 0 0 0;
  padding: 8px;
  background: var(--bg);
  border-radius: 4px;
  font-size: 0.85rem;
}

.report-status-pending .icon,
.report-status-resolved .icon,
.report-status-rejected .icon {
  font-size: 1.2rem;
}

/* Appeal system */
.appeal-section {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.appeal-help-text {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.appeal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.appeal-comment {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.appeal-btn {
  align-self: flex-start;
}

.appeal-status-overturned {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  background: rgba(34, 197, 94, 0.1);
  color: #059669;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.appeal-status-upheld {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  background: rgba(107, 114, 128, 0.1);
  color: var(--fg);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.appeal-status-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.appeal-feedback {
  margin-top: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--fg);
}

.appeal-status-overturned .icon,
.appeal-status-upheld .icon,
.appeal-status-pending .icon {
  font-size: 1.2rem;
}

/* Suggested Revision (NEEDS EDIT flow) */
.suggested-revision-section {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.05);
  border: 2px solid rgba(59, 130, 246, 0.3);
}

.suggested-revision-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 6px;
  color: #2563eb;
}

.suggested-revision-header .icon {
  font-size: 1.3rem;
}

.suggested-revision-section .previous-response {
  margin-bottom: 16px;
}

.suggested-revision-section .previous-response h4 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.suggested-revision-section .prev-text {
  padding: 12px;
  background: var(--surface);
  border-radius: 6px;
  font-size: 0.95rem;
  border-left: 3px solid var(--border);
}

.suggested-revision {
  margin-bottom: 16px;
}

.suggested-revision h4 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: #2563eb;
}

.suggested-text {
  padding: 12px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 6px;
  font-size: 0.95rem;
  border-left: 3px solid #22c55e;
}

.revision-explanation {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--surface);
  border-radius: 6px;
}

.revision-explanation h4 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.revision-explanation .explanation-text {
  font-size: 0.95rem;
}

.accept-revision-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.accept-revision-actions .action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.accept-revision-actions .btn {
  padding: 12px 24px;
}

.accept-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ─── Mobile Tightening (audit Feb 2026) ──────────────────── */
@media (max-width: 480px) {
  /* Section detail: stack title + due date */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Flashcard review: reduce generous padding */
  .flashcard {
    padding: 24px 20px;
    min-height: 200px;
  }

  .flashcard-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .rating-buttons {
    gap: 8px;
  }

  .rating-btn {
    padding: 12px 8px;
    font-size: 0.9rem;
  }

  /* Quiz: tighter question card */
  .question-card {
    padding: 16px;
  }

  /* Concept cards: allow wrapping */
  .concept-card {
    flex-wrap: wrap;
  }

  /* Unit detail: reduce check indent */
  .checks-list {
    padding-left: 24px;
  }

  /* Writing prompt + celebration: reduce padding */
  .prompt-card {
    padding: 16px;
  }

  .celebration {
    padding: 32px 16px;
  }
}

/* ─── Updates Bell ───────────────────────────────────────────── */
.updates-bell {
  position: relative;
}

.updates-bell-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  position: relative;
}

.updates-bell-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border-color: var(--border-hover);
}

[data-theme="dark"] .updates-bell-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.updates-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--panel);
}

.updates-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition-fast);
  z-index: 1000;
  overflow: hidden;
}

.updates-bell.open .updates-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.updates-header {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.updates-manage-link {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.updates-item {
  padding: 10px 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--border);
}

.updates-item:last-child {
  border-bottom: none;
}

.updates-category {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

.updates-category-feature {
  color: var(--accent-strong);
  background: var(--accent-glow);
}

.updates-category-content {
  color: var(--success-strong);
  background: var(--success-glow);
}

.updates-category-grading {
  color: #9333ea;
  background: rgba(147, 51, 234, 0.1);
}

.updates-message {
  flex: 1;
  color: var(--text);
}

.updates-date {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Mobile: full-width dropdown
   Note: .topbar uses backdrop-filter which creates a new containing block,
   breaking position:fixed for children. Use absolute positioning instead. */
@media (max-width: 600px) {
  .updates-dropdown {
    width: calc(100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;
    right: -4px;
  }
}

/* ========================================
   PressBooks OER Content Styles
   Scoped under .pressbooks-content
   ======================================== */

/* Learning objectives box */
.pressbooks-content .bcc-box {
  border-left: 4px solid var(--accent);
  background: var(--accent-glow);
  padding: 1em 1.25em;
  border-radius: 8px;
  margin: 1.5em 0;
}

.pressbooks-content .bcc-box h3 {
  margin-top: 0;
  font-size: 1rem;
  color: var(--accent-strong);
}

.pressbooks-content .bcc-box ol,
.pressbooks-content .bcc-box ul {
  margin-bottom: 0;
}

/* Glossary terms (converted from PressBooks modals to dfn tooltips) */
.pressbooks-content dfn[title] {
  border-bottom: 1px dotted var(--text-secondary);
  cursor: help;
  font-style: normal;
  text-decoration: none;
}

/* Footnotes */
.pressbooks-content .footnotes {
  border-top: 1px solid var(--border);
  margin-top: 2em;
  padding-top: 1em;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.pressbooks-content .footnotes ol {
  padding-left: 1.5em;
}

.pressbooks-content sup.footnote a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.pressbooks-content a.return-footnote {
  color: var(--accent);
  text-decoration: none;
  margin-left: 0.25em;
}

/* Figures and images */
.pressbooks-content figure {
  margin: 1.5em 0;
  text-align: center;
}

.pressbooks-content figcaption {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.5em;
  font-style: italic;
}

.pressbooks-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin: 1em auto;
  background: #fff;
  padding: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Tables (inherit existing table styles but ensure readability) */
.pressbooks-content table {
  width: 100%;
  margin: 1em 0;
}

/* Section headers */
.pressbooks-content h2 {
  margin-top: 2em;
  padding-top: 0.5em;
  border-top: 1px solid var(--border);
}

.pressbooks-content h2:first-child {
  border-top: none;
  margin-top: 0;
}

/* OER attribution block */
.oer-attribution {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.oer-attribution a {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Textbook contents + search ────────────────────────────── */
.breadcrumb-with-action {
  justify-content: space-between;
  flex-wrap: wrap;
}

.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumb-action {
  white-space: nowrap;
}

.textbook-header h1 {
  margin-top: 0;
}

.textbook-search {
  display: flex;
  gap: 8px;
  margin: 16px 0 4px;
}

.textbook-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color var(--transition-fast);
}

.textbook-search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}

.textbook-search .btn {
  flex: 0 0 auto;
}

.textbook-unit h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.textbook-badge {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  vertical-align: middle;
}

.textbook-sections {
  margin: 10px 0 0;
  padding-left: 22px;
}

.textbook-sections li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.textbook-section-desc {
  display: block;
  font-size: 0.85rem;
}

.textbook-result h2 {
  margin: 2px 0 8px;
  font-size: 1.1rem;
}

.textbook-result-unit {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.textbook-snippet {
  margin: 0;
  line-height: 1.65;
  color: var(--text-secondary);
}

.textbook-snippet mark {
  padding: 0 2px;
  color: inherit;
  background: var(--accent-glow);
  border-radius: 3px;
  font-weight: 600;
}

@media (max-width: 520px) {
  .textbook-search {
    flex-direction: column;
  }
}

/* ─── Textbook: navbar magnifier + index of topics ──────────── */
.textbook-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.textbook-search-toggle:hover,
.textbook-search-toggle.active {
  background: rgba(0, 0, 0, 0.05);
  color: var(--accent);
  border-color: var(--border-hover);
}

[data-theme="dark"] .textbook-search-toggle:hover,
[data-theme="dark"] .textbook-search-toggle.active {
  background: rgba(255, 255, 255, 0.06);
}

.textbook-index-cta p {
  margin: 0 0 6px;
}

.textbook-index-cta p:last-child {
  margin-bottom: 0;
}

.textbook-index-cta .muted {
  margin-left: 8px;
  font-size: 0.9rem;
}

.textbook-alphabet {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.textbook-alphabet a {
  min-width: 30px;
  padding: 4px 8px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
}

.textbook-alphabet a:hover {
  border-color: var(--accent);
}

.textbook-index-letter {
  margin: 0 0 12px;
  padding-bottom: 6px;
  font-size: 1.4rem;
  border-bottom: 1px solid var(--border);
}

.textbook-index-entries {
  margin: 0;
  padding: 0;
  list-style: none;
}

.textbook-index-entry {
  padding: 5px 0;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

.textbook-index-entry:last-child {
  border-bottom: none;
}

.textbook-index-label {
  font-weight: 600;
}

.textbook-index-alias .textbook-index-label,
.textbook-index-inverted .textbook-index-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.textbook-index-see {
  margin-left: 6px;
  font-size: 0.85rem;
  font-style: italic;
}

.textbook-index-targets {
  display: block;
  font-size: 0.9rem;
}

.textbook-index-sep {
  margin: 0 6px;
  color: var(--text-secondary);
}

/* ─── Textbook quick search (topbar magnifier + live results) ─ */
.textbook-quicksearch {
  position: relative;
  display: flex;
  align-items: center;
}

.textbook-quicksearch-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(420px, calc(100vw - 32px));
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 60;
}

.textbook-quicksearch.open .textbook-quicksearch-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.textbook-quicksearch.open .textbook-search-toggle {
  color: var(--accent);
  border-color: var(--accent);
}

.textbook-quicksearch-input {
  width: 100%;
  padding: 9px 12px;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.textbook-quicksearch-input:focus {
  outline: none;
  border-color: var(--accent);
}

.textbook-quicksearch-results {
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

.textbook-quicksearch-results:not(:empty) {
  margin-top: 8px;
}

.tqs-note {
  padding: 6px 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.tqs-row {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.tqs-row:hover,
.tqs-row.active {
  background: var(--surface);
}

/* A reading the section has marked optional. The badge has to be on the
   RESULT, not only on the page it opens: finding out after the click is how an
   unassigned chapter reads as homework (see reference_unit_ids_for_course). */
.tqs-optional {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.tqs-unit {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.tqs-title {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
}

.tqs-snippet {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
  /* Two lines is enough to tell whether this is the right reading. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tqs-snippet mark {
  padding: 0 2px;
  color: inherit;
  background: var(--accent-glow);
  border-radius: 3px;
  font-weight: 600;
}

.tqs-empty {
  padding: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.tqs-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  padding: 8px 10px 2px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

@media (max-width: 520px) {
  .textbook-quicksearch-panel {
    position: fixed;
    top: 60px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* Dropdown header: the query echoed back, so it is obvious what was searched */
.tqs-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}

.tqs-head-icon {
  font-size: 0.9rem;
}

.tqs-head-query {
  font-weight: 600;
}

.tqs-head-alias {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.tqs-title .tqs-unit {
  display: inline;
  margin-left: 8px;
  font-weight: 400;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.tqs-footer-main {
  font-weight: 600;
}

.tqs-footer-alt {
  color: var(--text-secondary);
}

/* ─── AI triage rows ────────────────────────────────────────────
   Own classes rather than reusing .submission-header/.submission-meta:
   that meta block is an auto-fit grid (minmax(150px, 1fr)), so in the
   narrow status column it collapsed to one column and stacked the score,
   the verdict, and the button into a tall ragged stack that no longer
   lined up with the student it described. .stat-value's 2rem made the
   score the loudest thing on a page whose whole point is that the score
   is only a reading order. */
.triage-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

.triage-row {
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--bg-elevated, transparent);
}

.triage-row[open] {
  border-color: var(--accent, #1d4ed8);
}

.triage-row > summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 20px;
  align-items: center;
}

.triage-row > summary::-webkit-details-marker { display: none; }

.triage-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.triage-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* Two lines of the answer, always. A ragged 1-3 line excerpt was most of
   why the rows read as uneven. */
.triage-excerpt {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Behaviour marker chip on the collapsed row. Deliberately quieter than the
   model score and never coloured red: it names something that happened in the
   text box, which is a question to ask and never a finding. Exactly one chip
   shows here; a strip of them would read as a score. */
.triage-marker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
  padding: 2px 8px;
  border: 1px solid var(--border, #d4d4d8);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
  cursor: help;
}

.triage-marker-dots {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--warning, #b06000);
  white-space: nowrap;
}

.triage-markers li {
  line-height: 1.45;
}

/* Fixed width and right-aligned so the scores form a readable column down
   the page instead of floating at each row's own width. */
.triage-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

.triage-score {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #1d4ed8);
  line-height: 1.1;
}

.triage-score .triage-score-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: block;
}

.triage-score.is-empty {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.triage-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e5e5e5);
}

.triage-prompt {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.triage-answer {
  white-space: pre-wrap;
  line-height: 1.65;
}

.triage-axes {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .triage-row > summary {
    grid-template-columns: 1fr;
  }
  .triage-status {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
  }
}

/* Teacher preview of a student-facing page (?preview=1). Deliberately loud:
   the whole risk of a preview mode is a teacher mistaking it for the real page
   and reporting a bug against it, or a student seeing the banner and thinking
   their own page is a mockup. It is only ever rendered for teachers. */
.preview-banner {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  text-align: left;
}

.preview-banner a {
  white-space: nowrap;
}

.course-content-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.course-content-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .course-content-panel { align-items: flex-start; }
}

.preview-picker {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.preview-pick {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.preview-pick.is-current {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

.preview-picker-note {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.join-confirm {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ─── Announcement bodies ──────────────────────────────────────
   Announcements are authored in markdown, so this styles the tags the
   `markdown` filter can emit. It lives here rather than in a template
   because the student's page and the teacher's preview pane must agree:
   a preview that styles itself is a preview that lies. */
.ann-body {
  line-height: 1.65;
  color: var(--text);
}
.ann-body > *:first-child { margin-top: 0; }
.ann-body > *:last-child { margin-bottom: 0; }
.ann-body p { margin: 0 0 1.1em; }
.ann-body h1,
.ann-body h2 { font-size: 1.15rem; margin: 1.8em 0 0.6em; line-height: 1.3; }
.ann-body h3,
.ann-body h4,
.ann-body h5,
.ann-body h6 { font-size: 1rem; margin: 1.6em 0 0.5em; }
.ann-body ul,
.ann-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.ann-body li { margin-bottom: 0.4em; }
.ann-body li > ul,
.ann-body li > ol { margin: 0.4em 0 0; }
.ann-body a { color: var(--accent); }
.ann-body strong,
.ann-body b { font-weight: 650; }
.ann-body blockquote {
  margin: 0 0 1.1em;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--border-hover);
  color: var(--text-secondary);
}
.ann-body code {
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface);
}
.ann-body pre {
  overflow-x: auto;
  padding: 12px 14px;
  border-radius: 8px;
  margin: 0 0 1.1em;
  background: var(--surface);
}
.ann-body pre code { background: none; padding: 0; }
.ann-body hr { border: 0; border-top: 1px solid var(--border); margin: 1.8em 0; }
.ann-body img { max-width: 100%; height: auto; border-radius: 8px; }
.ann-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1.1em;
  font-size: 0.94em;
}
.ann-body th,
.ann-body td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.ann-body th { font-weight: 600; }

/* ─── Rich links inside an announcement ────────────────────────
   A link to something inside psych.study is resolved and decorated by
   services/rich_links.py. A link on its own line becomes a card (the "go do
   this" link); a link inside a sentence becomes an inline chip. Icons are per
   KIND, so reading and assignment are distinguishable at a glance. */

.rl-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 0 0 1.1em;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.rl-card:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.rl-card-icon { font-size: 1.5rem; line-height: 1; flex: none; }
.rl-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-card-title { font-weight: 650; color: var(--text); }
.rl-card-meta { font-size: 0.83em; color: var(--text-muted); }
.rl-card-go {
  margin-left: auto; flex: none; font-size: 1.4rem; line-height: 1;
  color: var(--text-muted); transition: transform var(--transition-fast);
}
.rl-card:hover .rl-card-go { transform: translateX(3px); color: var(--accent); }

.rl-inline {
  display: inline;
  text-decoration: none;
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.rl-inline:hover { border-bottom-color: currentColor; }
/* Keeps the icon and its words from being split across a line break. */
.rl-inline .rl-icon { margin-right: 0.28em; font-style: normal; }
.rl-inline .rl-label { white-space: normal; }
.rl-arrow { font-size: 0.85em; margin-left: 0.18em; opacity: 0.8; }

/* The pill that marks a broadcast, so a student can tell at a glance that
   nobody is waiting on them to answer it. */
.ann-kind {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: 999px;
  padding: 3px 9px;
}