/* ==========================================================================
   Campus Nomada — Design System
   Central brand tokens + component styles. Layered on top of Bootstrap 5.
   Owned visual identity (NOT copied from any third party).
   ========================================================================== */

:root {
  /* --- Brand palette --- */
  --brand-900: #312e81;
  --brand-700: #4338ca;   /* primary */
  --brand-500: #6366f1;
  --brand-100: #e0e7ff;
  --accent-500: #0ea5a4;  /* teal accent */

  /* --- Status colors (paired with icons/labels, never color-only) --- */
  --status-done: #16a34a;
  --status-current: var(--brand-700);
  --status-locked: #94a3b8;
  --status-available: #475569;

  /* --- Neutrals --- */
  --ink-900: #0f172a;
  --ink-600: #475569;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;   /* slate-100 — neutral chip/tag fill */
  --line: #e2e8f0;

  /* --- CRM simulator (Enterprise Slate) --- */
  --crm-header-bg: #0f172a;    /* slate-900 header */
  --crm-header-line: #1e293b;  /* slate-800 thin header border */
  --crm-muted: #94a3b8;        /* slate-400 header subtext & muted labels */
  --status-warn: #b45309;      /* amber-700 — the single "in progress" accent */
  --status-warn-bg: #fef3c7;   /* amber-100 */

  /* --- Shape & spacing --- */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 6px 24px rgba(15, 23, 42, 0.08);
}

body {
  color: var(--ink-900);
  background: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Brand utilities --- */
.text-brand { color: var(--brand-700) !important; }
.bg-brand { background-color: var(--brand-700) !important; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 1.6em; height: 1.6em;
  border-radius: 8px;
  background: var(--brand-700);
  color: #fff;
  font-weight: 700;
  font-size: 0.72em;
  letter-spacing: 0.5px;
}

.btn-brand {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}
.btn-brand:hover:not(.disabled) { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }

.btn-outline-brand {
  border-color: var(--brand-700);
  color: var(--brand-700);
}
.btn-outline-brand:hover:not(.disabled) { background: var(--brand-700); color: #fff; }

.badge-soft {
  background: var(--brand-100);
  color: var(--brand-700);
  font-weight: 600;
  padding: 0.5em 0.9em;
  border-radius: 999px;
}

/* --- Hero --- */
.hero {
  background: linear-gradient(180deg, var(--surface) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}

/* --- Learning-path preview (illustrative on home; real component in Phase 6) --- */
.path-preview { border: 1px solid var(--line); border-radius: var(--radius); }
.path-list { list-style: none; margin: 0; padding: 0; }
.path-node {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
}
.path-node:last-child { border-bottom: none; }
.node-icon {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  font-size: 0.85rem;
  color: #fff;
}
.path-node.done .node-icon { background: var(--status-done); }
.path-node.current .node-icon { background: var(--status-current); }
.path-node.locked .node-icon { background: var(--status-locked); }
.node-label {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--ink-600);
}

/* --- Value cards --- */
.value-card {
  padding: 1.75rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: box-shadow 0.15s ease;
}
.value-card:hover { box-shadow: var(--shadow-soft); }
.value-icon { font-size: 2rem; margin-bottom: 0.5rem; }

/* --- CTA band --- */
.cta-band { background: var(--surface); border-top: 1px solid var(--line); }

/* --- Error pages --- */
.error-code { font-size: 5rem; font-weight: 800; line-height: 1; }

/* ==========================================================================
   Student dashboard
   ========================================================================== */
.dashboard-hero {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--accent-500) 100%);
  color: #fff;
  border-radius: var(--radius);
}
.dashboard-hero .lesson-meta { opacity: 0.85; font-size: 0.875rem; }
.dashboard-hero .btn-continue {
  background: #fff;
  color: var(--brand-700);
  font-weight: 600;
  border: none;
}
.dashboard-hero .btn-continue:hover { background: var(--brand-100); color: var(--brand-900); }

.stat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  background: #fff;
  text-align: center;
}
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--brand-700); line-height: 1; }
.stat-card .stat-label { font-size: 0.8rem; color: var(--ink-600); margin-top: 0.2rem; }

.course-progress-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: box-shadow 0.15s ease;
  height: 100%;
}
.course-progress-card:hover { box-shadow: var(--shadow-soft); }
.course-progress-card .card-thumb {
  height: 120px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-700) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: #fff;
  overflow: hidden;
}
.course-progress-card .card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.progress-label { font-size: 0.75rem; color: var(--ink-600); }

/* ==========================================================================
   Course catalog cards
   ========================================================================== */
.course-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  height: 100%;
}
.course-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}
.course-card .card-img-top {
  height: 160px;
  object-fit: cover;
  background: var(--brand-100);
}
.course-card-placeholder {
  height: 160px;
  background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-700) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.5rem;
}
.difficulty-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25em 0.65em;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.difficulty-badge.beginner    { background: #dcfce7; color: #166534; }
.difficulty-badge.intermediate { background: #fef9c3; color: #854d0e; }
.difficulty-badge.advanced    { background: #fee2e2; color: #991b1b; }

/* ==========================================================================
   Learning layout (outline + lesson pages)
   ========================================================================== */
.learn-shell { min-height: calc(100vh - 70px); }

.outline-sidebar {
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 1.25rem 0;
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}

.outline-module-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-600);
  padding: 0.5rem 1.25rem 0.25rem;
}

.outline-lesson {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ink-900);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.outline-lesson:hover { background: var(--surface); color: var(--brand-700); }
.outline-lesson.active {
  border-left-color: var(--brand-700);
  background: var(--brand-100);
  color: var(--brand-700);
  font-weight: 600;
}
.outline-lesson.locked { color: var(--status-locked); cursor: not-allowed; pointer-events: none; }
.outline-lesson.completed { color: var(--status-done); }

.lesson-state-icon {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.lesson-state-icon.completed  { background: var(--status-done);    color: #fff; }
.lesson-state-icon.current    { background: var(--brand-700);       color: #fff; }
.lesson-state-icon.available  { background: #fff; border: 2px solid var(--brand-700); color: var(--brand-700); }
.lesson-state-icon.locked     { background: #fff; border: 2px solid var(--status-locked); color: var(--status-locked); }

/* Lesson content area */
.lesson-content-body { max-width: 760px; }
.lesson-content-body h2 { font-size: 1.35rem; font-weight: 700; margin-top: 1.5rem; }
.lesson-content-body h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.25rem; }
.lesson-content-body ul, .lesson-content-body ol { padding-left: 1.5rem; }
.lesson-content-body li { margin-bottom: 0.35rem; }

/* Quill alignment classes — applied in both lesson and blog content */
.lesson-content-body .ql-align-center,
.blog-body .ql-align-center  { text-align: center; }
.lesson-content-body .ql-align-right,
.blog-body .ql-align-right   { text-align: right; }
.lesson-content-body .ql-align-justify,
.blog-body .ql-align-justify { text-align: justify; }

/* Key takeaways callout */
.key-takeaways {
  border-left: 4px solid var(--brand-700);
  background: var(--brand-100);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}
.key-takeaways-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--brand-700);
  margin-bottom: 0.4rem;
}
.key-takeaways p { margin-bottom: 0; font-size: 0.95rem; color: var(--ink-900); }

/* "You can now do this" lesson-closing callout */
.can-do-callout {
  background: var(--brand-100);
  border-left: 4px solid var(--brand-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.75rem 1rem;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--ink-900);
  line-height: 1.55;
}
.can-do-callout strong { color: var(--brand-700); }

/* Resources section */
.resources-section { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2.5rem; }
.resource-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-900);
  transition: background 0.12s;
  font-size: 0.875rem;
}
.resource-item:hover { background: var(--surface); color: var(--brand-700); }
.resource-icon { font-size: 1.25rem; flex-shrink: 0; }
.resource-size { font-size: 0.75rem; color: var(--ink-600); margin-left: auto; }

/* Video embed */
.lesson-video-wrap { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.5rem; }

/* Mobile course outline bar */
.mobile-outline-bar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 1rem;
  position: sticky;
  top: 62px;
  z-index: 100;
}

/* Offcanvas outline */
.offcanvas-outline .outline-sidebar {
  position: static;
  max-height: none;
  border-right: none;
  padding: 0.5rem 0;
}

/* ==========================================================================
   Quiz runner
   ========================================================================== */
.quiz-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.quiz-question {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  background: #fff;
}
.question-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  font-weight: 700;
  font-size: 0.8rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.quiz-question-text { font-weight: 600; display: flex; align-items: flex-start; gap: 0; }
.quiz-answers { padding-left: 0; }

/* Result panel */
.quiz-result-panel { max-width: 700px; }

.score-circle {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 120px; height: 120px;
  border-radius: 50%;
  font-size: 2rem; font-weight: 800;
  border: 6px solid;
}
.score-circle.pass { border-color: var(--status-done); color: var(--status-done); }
.score-circle.fail { border-color: #dc3545; color: #dc3545; }
.score-circle .score-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-top: -4px; }

/* Per-question result */
.qr-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.qr-header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem;
  font-weight: 600; font-size: 0.9rem;
}
.qr-header.correct { background: #dcfce7; color: #166534; }
.qr-header.incorrect { background: #fee2e2; color: #991b1b; }
.qr-body { padding: 0.75rem 1rem; font-size: 0.875rem; }
.answer-badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  font-size: 0.8rem;
  margin: 0.15rem 0.15rem 0.15rem 0;
}
.answer-badge.selected-correct { background: #dcfce7; color: #166534; }
.answer-badge.selected-incorrect { background: #fee2e2; color: #991b1b; }
.answer-badge.correct-unselected { background: #fef9c3; color: #854d0e; border: 1px dashed #ca8a04; }
.answer-badge.neutral { background: var(--surface); color: var(--ink-600); }
.explanation-box { background: var(--surface); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; margin-top: 0.5rem; font-size: 0.82rem; color: var(--ink-600); }
.hint-box { border-radius: var(--radius-sm); padding: 0.65rem 0.85rem; margin-top: 0.5rem; font-size: 0.85rem; }
.hint-box.hint-level1 { background: #eff6ff; color: #1e40af; border-left: 3px solid #3b82f6; }
.hint-box.hint-detailed { background: #fefce8; color: #854d0e; border-left: 3px solid #eab308; }
audio.nato-audio { display: block; width: 100%; height: 28px; margin-top: 6px; }

/* ==========================================================================
   Admin shell (sidebar layout — distinct from student/public top-nav)
   ========================================================================== */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--ink-900);
  color: #cbd5e1;
  padding: 1.25rem 1rem;
}
.admin-brand { color: #fff; font-weight: 700; margin-bottom: 1.5rem; }
.admin-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.admin-nav-link {
  color: #cbd5e1;
  text-decoration: none;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
}
.admin-nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-nav-link.active { background: rgba(255,255,255,0.15); color: #fff; font-weight: 600; }
.admin-nav { display: flex; flex-direction: column; gap: 0.15rem; flex-grow: 1; }
.admin-sidebar { display: flex; flex-direction: column; }
.admin-main { flex-grow: 1; background: var(--surface); }
.admin-topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.5rem;
}
.admin-content { padding: 1.5rem; }

@media (max-width: 768px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; }
}

/* ==========================================================================
   Interactive activity components
   ========================================================================== */

/* --- Scenario card (opening hook) --- */
.scenario-card {
  border: 1px solid var(--brand-100);
  border-left: 5px solid var(--brand-700);
  background: linear-gradient(135deg, #f8f9ff 0%, var(--brand-100) 100%);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.scenario-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}
.scenario-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-700);
  margin-bottom: 0.35rem;
}
.scenario-context {
  font-size: 0.95rem;
  color: var(--ink-900);
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.scenario-question {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-700);
  margin: 0;
}

/* --- Flashcard deck --- */
.flashcard-deck {
  max-width: 580px;
  margin: 0 auto 2rem;
}
.flashcard-counter {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-600);
  margin-bottom: 0.75rem;
}
.flashcard {
  perspective: 1200px;
  height: 220px;
  cursor: pointer;
  user-select: none;
}
.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(.4,2,.6,1);
  transform-style: preserve-3d;
}
.flashcard.flipped .flashcard-inner {
  transform: rotateY(180deg);
}
.flashcard-front,
.flashcard-back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.flashcard-front {
  background: var(--brand-700);
  color: #fff;
}
.flashcard-front .fc-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.flashcard-front .fc-term {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
}
.flashcard-back {
  background: #fff;
  border: 2px solid var(--brand-100);
  color: var(--ink-900);
  transform: rotateY(180deg);
}
.flashcard-back .fc-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-700);
  margin-bottom: 0.75rem;
}
.flashcard-back .fc-def {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-900);
}
.flashcard-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-600);
  margin-top: 0.5rem;
}
.flashcard-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.flashcard-dots {
  display: flex;
  gap: 0.4rem;
}
.flashcard-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s;
}
.flashcard-dot.active { background: var(--brand-700); }

/* --- Checklist activity --- */
.checklist-activity {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  background: #fff;
  margin-bottom: 2rem;
}
.checklist-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--ink-600);
  margin-bottom: 0.85rem;
}
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.5;
  transition: opacity 0.2s;
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--brand-700);
  cursor: pointer;
}
.checklist-item label {
  cursor: pointer;
  margin: 0;
}
.checklist-item.done label {
  text-decoration: line-through;
  color: var(--ink-600);
}
.checklist-progress {
  font-size: 0.75rem;
  color: var(--ink-600);
  margin-top: 0.75rem;
  text-align: right;
}

/* --- Ordering question (drag-and-drop with up/down controls) --- */
.ordering-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ordering-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  cursor: grab;
  transition: box-shadow 0.15s, transform 0.1s;
}
.ordering-item.dragging {
  opacity: 0.5;
  box-shadow: var(--shadow-soft);
}
.ordering-item.drag-over {
  border-color: var(--brand-700);
  background: var(--brand-100);
}
.ordering-handle {
  color: var(--ink-600);
  font-size: 0.9rem;
  flex-shrink: 0;
  cursor: grab;
}
.ordering-item-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ordering-item-text { flex: 1; }
.ordering-btns { display: flex; flex-direction: column; gap: 2px; margin-left: auto; }
.ordering-btns button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.65rem;
  padding: 0 0.3rem;
  cursor: pointer;
  color: var(--ink-600);
  line-height: 1.4;
}
.ordering-btns button:hover { background: var(--surface); }

/* Ordering result display */
.ordering-result-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
}
.ordering-result-col h6 {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-600);
  margin-bottom: 0.4rem;
}
.ordering-result-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}
.ordering-result-step.match { background: #dcfce7; color: #166534; }
.ordering-result-step.mismatch { background: #fee2e2; color: #991b1b; }

/* ==========================================================================
   Interactive games
   ========================================================================== */

/* Shared game shell */
.game-container {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 2rem;
  overflow: hidden;
}
.game-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.game-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-700);
  background: var(--brand-100);
  padding: 0.2em 0.6em;
  border-radius: 999px;
  flex-shrink: 0;
}
.game-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-900);
}
.game-body { padding: 1.25rem 1.5rem; }
.game-win-icon { font-size: 2.5rem; }

@keyframes miss-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.miss { animation: miss-shake 0.5s ease; }

/* ── Match Box ── */
.match-score {
  font-size: 0.8rem;
  color: var(--ink-600);
  margin-bottom: 0.75rem;
}
.match-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.match-col { display: flex; flex-direction: column; gap: 0.4rem; }
.match-card {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  line-height: 1.4;
}
.match-card:hover:not(:disabled):not(.matched) {
  border-color: var(--brand-500);
  background: var(--brand-100);
}
.match-card.selected {
  border-color: var(--brand-700);
  background: var(--brand-100);
  box-shadow: 0 0 0 3px rgba(67,56,202,.15);
  transform: scale(1.02);
}
.match-card.matched {
  border-color: var(--status-done);
  background: #dcfce7;
  color: #166534;
  cursor: default;
  opacity: 0.75;
}
.match-card.miss { border-color: #dc3545; animation: miss-shake 0.5s ease; }
.match-success { text-align: center; padding: 1rem 0; }

@media (max-width: 500px) {
  .match-board { grid-template-columns: 1fr; }
}

/* ── Sort the Stack ── */
.sort-buckets {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.sort-bucket {
  flex: 1;
  min-width: 140px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sort-bucket:hover { border-color: var(--brand-500); background: var(--brand-100); }
.sort-bucket-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brand-700);
  margin-bottom: 0.5rem;
}
.sort-bucket-zone { display: flex; flex-direction: column; gap: 0.3rem; min-height: 32px; }
.sort-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sort-item {
  padding: 0.45rem 0.85rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sort-item:hover:not(:disabled) { border-color: var(--brand-500); background: var(--brand-100); }
.sort-item.selected {
  border-color: var(--brand-700);
  background: var(--brand-100);
  font-weight: 600;
}
.sort-item.correct {
  border-color: var(--status-done);
  background: #dcfce7;
  color: #166534;
  font-size: 0.78rem;
  cursor: default;
  padding: 0.3rem 0.65rem;
}
.sort-item.miss { animation: miss-shake 0.5s ease; border-color: #dc3545; }
.sort-success { text-align: center; padding: 0.75rem 0; }

/* ── Spot the Error ── */
.spot-document {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  font-size: 0.925rem;
  line-height: 1.8;
  font-family: Georgia, serif;
}
.spot-plain { white-space: pre-wrap; }
.spot-zone {
  display: inline;
  background: none;
  border: none;
  border-bottom: 2px dashed var(--brand-500);
  color: var(--brand-700);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0 1px;
  border-radius: 0;
  line-height: inherit;
  transition: background 0.15s;
}
.spot-zone:hover { background: var(--brand-100); border-radius: 2px; }
.spot-zone.found {
  background: #fee2e2;
  border-bottom-color: #dc3545;
  color: #991b1b;
  border-radius: 3px;
  text-decoration: line-through;
}
.spot-zone.revealed { border-bottom-style: solid; }
.spot-exp {
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: #fef9c3;
  border-left: 4px solid #ca8a04;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem;
  color: #78350f;
}
.spot-success { text-align: center; padding: 0.75rem 0; }

/* ── Decision Tree ── */
.dtree-situation {
  background: var(--surface);
  border-left: 4px solid var(--brand-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: var(--ink-900);
}
.dtree-question {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
  color: var(--ink-900);
}
.dtree-choices { display: flex; flex-direction: column; gap: 0.5rem; }
.dtree-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
}
.dtree-choice:hover:not(:disabled) {
  border-color: var(--brand-500);
  background: var(--brand-100);
}
.dtree-choice-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.dtree-terminal {
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  text-align: center;
}
.dtree-ok  { background: #dcfce7; border: 1px solid #86efac; }
.dtree-fail { background: #fee2e2; border: 1px solid #fca5a5; }
.dtree-t-icon {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.dtree-ok  .dtree-t-icon { color: #166534; }
.dtree-fail .dtree-t-icon { color: #991b1b; }
.dtree-t-msg {
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto;
}
.dtree-ok  .dtree-t-msg { color: #166534; }
.dtree-fail .dtree-t-msg { color: #991b1b; }
.dtree-complete { padding: 1rem 0; }

/* --- Milestone celebration modal --- */
.milestone-body {
  text-align: center;
  padding: 2rem 1.5rem;
}
.milestone-trophy {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  display: block;
}
.milestone-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--brand-700);
  margin-bottom: 0.5rem;
}
.milestone-msg {
  color: var(--ink-600);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* ==========================================================================
   Self-Assessment Widget
   ========================================================================== */
.sa-prompt {
  font-size: 0.9rem;
  color: var(--ink-900);
  margin-bottom: 0.85rem;
}
.sa-stars {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.sa-star {
  font-size: 2rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #d1d5db;
  line-height: 1;
  transition: color 0.1s, transform 0.1s;
}
.sa-star.lit,
.sa-star.hover { color: #f59e0b; }
.sa-star:hover  { transform: scale(1.18); }
.sa-scale-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-700);
  min-height: 1.4em;
  margin-bottom: 0.5rem;
}
.sa-reflection-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-600);
}
.sa-textarea {
  font-size: 0.875rem;
  resize: vertical;
}
.sa-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.sa-saved-note {
  font-size: 0.78rem;
  color: var(--status-done);
}

/* ==========================================================================
   Dialogue Simulator
   ========================================================================== */
.ds-thread {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 1rem;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
  scroll-behavior: smooth;
}

/* Message row */
.ds-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 88%;
}
.ds-spk-client   { align-self: flex-start; }
.ds-spk-va       { align-self: flex-end;   flex-direction: row-reverse; max-width: 88%; }
.ds-spk-narrator {
  align-self: center;
  max-width: 100%;
  justify-content: center;
}

/* Avatars */
.ds-avatar {
  font-size: 1.15rem;
  flex-shrink: 0;
  width: 1.8rem;
  text-align: center;
  padding-top: 2px;
}
.ds-spk-narrator .ds-avatar { display: none; }

/* Bubbles */
.ds-bubble {
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.55;
}
.ds-spk-client .ds-bubble {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  color: var(--ink-900);
}
.ds-spk-va .ds-bubble {
  background: var(--brand-700);
  color: #fff;
  border-radius: var(--radius-sm) 0 var(--radius-sm) var(--radius-sm);
}
.ds-spk-narrator .ds-bubble {
  background: transparent;
  border: none;
  color: var(--ink-600);
  font-style: italic;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.25rem 0;
}
/* VA wrong pick — red bubble */
.ds-wrong-pick.ds-spk-va .ds-bubble {
  background: #fee2e2;
  color: #991b1b;
}
/* VA correct pick — slightly brighter */
.ds-correct-pick.ds-spk-va .ds-bubble {
  background: var(--brand-700);
}

/* Inline feedback line */
.ds-inline-fb {
  align-self: center;
  font-size: 0.78rem;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-sm);
  text-align: center;
  max-width: 92%;
}
.ds-fb-ok  { background: #dcfce7; color: #166534; }
.ds-fb-bad { background: #fee2e2; color: #991b1b; }

/* Choices zone */
.ds-choices-zone { margin-bottom: 0.5rem; }
.ds-choices-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-600);
  margin-bottom: 0.5rem;
}
.ds-choice-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-size: 0.855rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
  transition: border-color 0.15s, background 0.15s;
}
.ds-choice-btn:hover:not(:disabled) {
  border-color: var(--brand-500);
  background: var(--brand-100);
}
.ds-choice-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ds-choice-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Retry wrap */
.ds-retry-wrap { margin-top: 0.5rem; }

/* Completion */
.ds-complete-inner {
  text-align: center;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
}
.ds-complete-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-900);
  margin: 0.4rem 0;
}
.ds-score { color: var(--ink-600); font-size: 0.85rem; }

@media (max-width: 480px) {
  .ds-thread { max-height: 300px; }
  .ds-avatar  { display: none; }
  .ds-row, .ds-spk-va { max-width: 100%; }
}

/* ==========================================================================
   Blog access gate (unenrolled students)
   ========================================================================== */

/* Index — locked grid wrapper */
.blog-locked-outer {
  position: relative;
  min-height: 540px; /* guarantees CTA space even when no posts exist */
}

/* The blurred post grid sitting behind the CTA */
.blog-locked-grid {
  filter: blur(5px);
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

/* CTA overlay centered over the grid */
.blog-locked-cta-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 10;
}

/* Shared CTA card (used on both index and post gate) */
.blog-gate-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
  padding: 2.5rem 2rem;
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.blog-gate-icon { font-size: 2.5rem; margin-bottom: 0.6rem; }
.blog-gate-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.blog-gate-body {
  color: var(--ink-600);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.blog-gate-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
  font-size: 0.85rem;
}
.blog-gate-benefits li {
  padding: 0.28rem 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-900);
}
.blog-gate-benefits li::before {
  content: "✓";
  color: var(--status-done);
  font-weight: 700;
  flex-shrink: 0;
}

/* Post — teaser + fade + gate */
.blog-post-teaser {
  position: relative;
  max-height: 160px;
  overflow: hidden;
}
.blog-post-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}
.blog-post-gate {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
  background: var(--surface);
  margin-top: 1rem;
}

/* ===== Accessibility & polish additions (Phase 14) ===== */

/* Brand-coloured focus ring on form inputs */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 0.2rem rgba(67, 56, 202, 0.2);
}

/* Course card focus-within outline for keyboard navigation */
.course-card:focus-within {
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
}

/* Consistent checkbox/radio accent colour */
.form-check-input {
  accent-color: var(--brand-700);
}

/* Disabled button state */
.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Smooth hover/focus transitions on interactive elements */
.btn,
.nav-link,
.dropdown-item,
.card {
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Reduced motion: disable all decorative animations */
@media (prefers-reduced-motion: reduce) {
  .flashcard-inner {
    transition: none;
  }
  .btn,
  .nav-link,
  .dropdown-item,
  .card {
    transition: none;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sticky sidebar: static on small screens to prevent overlap */
@media (max-width: 575px) {
  .position-sticky {
    position: static !important;
  }
}

/* Outline sidebar scrollbar styling */
.outline-sidebar::-webkit-scrollbar {
  width: 6px;
}
.outline-sidebar::-webkit-scrollbar-thumb {
  background: var(--brand-200, #c7d2fe);
  border-radius: 3px;
}

/* Skip-to-main link: hidden until focused (Bootstrap visually-hidden-focusable
   handles the show/hide; this ensures it layers above the sticky nav) */
a.visually-hidden-focusable:focus {
  z-index: 1060;
}

/* ===== Skill anchor — "You can now do this" callout ===== */
/* Applied automatically by JS in lesson.html; or add class="skill-anchor"
   manually to any element in lesson body_html */
.skill-anchor {
  display: block;
  background: linear-gradient(135deg, var(--brand-100, #e0e7ff) 0%, #f0fdf4 100%);
  border-left: 4px solid var(--brand-700, #4338ca);
  border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
  padding: 0.85rem 1.1rem;
  margin: 1.25rem 0;
  font-size: 0.9rem;
  color: var(--ink-900, #0f172a);
  font-weight: 500;
  line-height: 1.55;
}