/* === Unit Styles — Copy this entire block into <style> tags in each unit HTML === */

/* === CSS VARIABLES === */
:root {
  --primary: #2e4e42;
  --primary-light: #d1e4dd;
  --primary-highlight: #03794d;
  --primary-dark: #1a3a2e;
  --bg-light: #f6faf8;
  --bg-white: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #6b6b6b;

  /* Activity type colors */
  --badge-page: #e3f2fd;
  --badge-page-text: #1565c0;
  --badge-assignment: #fff3e0;
  --badge-assignment-text: #b53d00;
  --badge-quiz: #f3e5f5;
  --badge-quiz-text: #7b1fa2;
  --badge-discussion: #e8f5e9;
  --badge-discussion-text: #2e7d32;

  /* DOK level colors */
  --dok1: #e3f2fd;
  --dok2: #fff9c4;
  --dok3: #ffe0b2;
  --dok4: #ffccbc;

  /* SEL colors */
  --sel-bg: #fce4ec;
  --sel-border: #e91e63;
  --sel-text: #880e4f;

  /* ML supports colors */
  --ml-bg: #e8eaf6;
  --ml-border: #3f51b5;
  --ml-text: #1a237e;

  /* Scoring colors for self-eval */
  --score-exemplary: #c6efce;
  --score-developing: #ffeb9c;
  --score-emerging: #ffc7ce;
  --score-not-present: #f4cccc;

  --font-family: 'Atkinson Hyperlegible', Arial, Helvetica, sans-serif;
  --line-height: 1.6;
  --max-width: 960px;
  --border-radius: 6px;
}

/* === BASE STYLES === */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  line-height: var(--line-height);
  color: var(--text-primary);
  background: var(--bg-light);
  padding: 0;
  margin: 0;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 30px;
  background: var(--bg-white);
}

/* === HEADINGS === */
h1 { font-size: 1.8rem; color: var(--primary-dark); margin: 0 0 8px 0; }
h2 { font-size: 1.4rem; color: var(--primary); margin: 30px 0 12px 0; border-bottom: 2px solid var(--primary-light); padding-bottom: 6px; }
h3 { font-size: 1.15rem; color: var(--primary-highlight); margin: 20px 0 8px 0; }
h4 { font-size: 1rem; color: var(--text-secondary); margin: 16px 0 6px 0; }

p { margin: 0 0 12px 0; }
ul, ol { margin: 0 0 12px 20px; }
li { margin-bottom: 6px; }

/* === UNIT HEADER === */
.unit-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-highlight) 100%);
  color: white;
  padding: 30px;
  border-radius: var(--border-radius);
  margin-bottom: 24px;
}
.unit-header h1 { color: white; font-size: 2rem; margin-bottom: 8px; }
.unit-header h2 { color: white; font-size: 1.8rem; margin-bottom: 8px; border: none; padding: 0; }
.essential-question {
  font-style: italic;
  font-size: 1.1rem;
  opacity: 0.95;
  margin: 8px 0 12px 0;
}
.header-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.header-badge {
  background: rgba(255,255,255,0.2);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
}

/* === LEARNING TARGETS === */
.learning-targets {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  padding: 16px 20px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}
.learning-target {
  margin-bottom: 12px;
}
.learning-target .i-can {
  font-weight: 700;
  color: var(--primary-dark);
}
.standard-code {
  display: inline-block;
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
}
.vocabulary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.vocabulary {
  background: var(--bg-light);
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: var(--border-radius);
}
.vocab-card {
  background: var(--bg-light);
  border: 1px solid var(--primary-light);
  border-radius: var(--border-radius);
  padding: 12px;
}
.vocab-term { font-weight: 700; color: var(--primary-dark); }
.vocab-definition { font-size: 0.9rem; margin-top: 4px; }

/* === LESSON SECTION === */
.lesson {
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  margin: 20px 0;
  overflow: hidden;
}
.lesson-header {
  background: var(--bg-light);
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.lesson-header h2 { margin: 0; border: none; padding: 0; }
.lesson-body { padding: 20px; }
.time-estimate {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* === ACTIVITY TYPES === */
.activity-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
}
.badge-page { background: var(--badge-page); color: var(--badge-page-text); }
.badge-assignment { background: var(--badge-assignment); color: var(--badge-assignment-text); }
.badge-quiz { background: var(--badge-quiz); color: var(--badge-quiz-text); }
.badge-discussion { background: var(--badge-discussion); color: var(--badge-discussion-text); }

/* === ACTIVITY SECTIONS === */
.activity {
  margin: 16px 0;
  padding: 16px;
  border-left: 3px solid var(--primary-light);
  background: var(--bg-light);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.activity h4 { margin-top: 0; }

/* === INSTRUCTION BOX === */
.direct-instruction {
  background: var(--bg-white);
  border: 1px solid var(--primary-light);
  padding: 16px;
  border-radius: var(--border-radius);
  margin: 12px 0;
}

/* === TRIGGERING EVENT === */
.triggering-event {
  background: #fff3e0;
  border-left: 4px solid #ff9800;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}
.triggering-event .trigger-label {
  font-weight: 700;
  color: #b53d00;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === SOCIAL PRESENCE === */
.social-presence {
  background: #e1f5fe;
  border-left: 4px solid #03a9f4;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}
.social-presence .social-label {
  font-weight: 700;
  color: #01579b;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sel-label {
  font-weight: 700;
  color: var(--sel-text);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === MULTILINGUAL SUPPORTS === */
.ml-supports {
  background: var(--ml-bg);
  border-left: 4px solid var(--ml-border);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}
.ml-supports .ml-label {
  font-weight: 700;
  color: var(--ml-text);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sentence-frame {
  background: white;
  border: 1px dashed var(--ml-border);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 6px 0;
  font-style: italic;
}

/* === ASSESSMENT SECTION === */
.assessment-section {
  border: 2px solid var(--primary);
  border-radius: var(--border-radius);
  margin: 24px 0;
  overflow: hidden;
}
.assessment-header {
  background: var(--primary);
  color: white;
  padding: 16px 20px;
}
.assessment-header h2,
.assessment-header h3,
.assessment-header h4 { color: white; border: none; margin: 0; padding: 0; }
.assessment-body { padding: 20px; }

.choice-option {
  background: var(--bg-light);
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  padding: 16px;
  margin: 10px 0;
}
.choice-option h4 { margin-top: 0; }

/* === RUBRIC TABLE === */
.rubric-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.9rem;
}
.rubric-table th {
  background: var(--primary);
  color: white;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
}
.rubric-table td {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  vertical-align: top;
}
.rubric-table tr:nth-child(even) { background: var(--bg-light); }

/* === AI GUIDANCE BOX === */
.ai-guidance {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}
.ai-guidance .ai-label {
  font-weight: 700;
  color: #9e5e00;
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* === DOK BADGE === */
.dok-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
}
.dok-2 { background: var(--dok2); color: #9e5e00; }
.dok-3 { background: var(--dok3); color: #b53d00; }
.dok-4 { background: var(--dok4); color: #8e2600; }

/* === ATTRIBUTION === */
.attribution {
  background: var(--bg-light);
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  padding: 12px 16px;
  margin: 8px 0;
  font-size: 0.85rem;
}

/* === SELF-ASSESSMENT TABLE === */
.self-assessment-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.9rem;
}
.self-assessment-table th {
  background: var(--primary);
  color: white;
  padding: 10px 12px;
  text-align: center;
  font-weight: 700;
}
.self-assessment-table th:first-child {
  text-align: left;
}
.self-assessment-table td {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  vertical-align: top;
}
.self-assessment-table td:first-child {
  text-align: left;
}
.self-assessment-table td:not(:first-child) {
  text-align: center;
  width: 120px;
}
.self-assessment-table tr:nth-child(even) {
  background: var(--bg-light);
}

/* === SELF-EVAL SUMMARY === */
.self-eval-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.self-eval-table th {
  background: var(--primary);
  color: white;
  padding: 8px 12px;
  text-align: left;
}
.self-eval-table td {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
}

/* === ICON + HEADER ALIGNMENT === */
.icon-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.icon-header img {
  flex-shrink: 0;
}
.icon-header h2,
.icon-header h3,
.icon-header h4 {
  margin: 0;
}

/* === PRINT STYLES === */
/* === NEW SEMANTIC CLASSES === */
.vocab-label {
  font-size: 0.85em;
  color: #666;
  margin-left: 8px;
}

.context-box {
  background-color: #e1f5fe;
  padding: 20px;
  border-left: 4px solid #0077b6;
  margin: 20px 0;
  border-radius: 4px;
}

.guidance-box {
  background-color: #f6faf8;
  padding: 20px;
  border-left: 4px solid #03794d;
  margin: 20px 0;
  border-radius: 4px;
}

.section-accent {
  font-weight: bold;
  color: #03794d;
}

@media print {
  body { background: white; }
  .container { max-width: 100%; padding: 0; }
  .unit-header { break-inside: avoid; }
  .lesson { break-inside: avoid; }
  .assessment-section { break-inside: avoid; }

}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .container { padding: 12px 16px; }
  .unit-header { padding: 20px; }
  .vocabulary-grid { grid-template-columns: 1fr; }
  .header-badges { flex-direction: column; }
}

/* === REFLECTION MOMENT (formerly SEL) === */
.reflection-moment {
  background: var(--sel-bg);
  border-left: 4px solid var(--sel-border);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}

/* === HINT / CLICK-TO-REVEAL BUTTONS === */
details {
  margin: 8px 0;
}
details summary {
  background: #e8f5e9;
  color: #2e7d32;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--border-radius);
  cursor: pointer;
  display: inline-block;
  font-size: 0.9rem;
  border: 1px solid #a5d6a7;
  transition: background 0.2s ease;
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: "▶ ";
  font-size: 0.75rem;
  margin-right: 4px;
}
details[open] summary::before {
  content: "▼ ";
}
details summary:hover {
  background: #c8e6c9;
}
details summary:focus {
  outline: 2px solid #2e7d32;
  outline-offset: 2px;
}

/* Keyboard focus indicators (WCAG 2.4.7) */
a:focus-visible,
input:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.submit-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
details > *:not(summary) {
  padding: 8px 16px;
  margin-top: 4px;
  background: var(--bg-light);
  border-left: 3px solid #a5d6a7;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/* === LEARNING TARGETS — h3 header inside green box === */
.learning-targets h3 {
  color: var(--primary-dark);
  margin: 0 0 8px 0;
  font-size: 1.15rem;
  border: none;
  padding: 0;
}

/* === STEP / DIRECTIONS === */
.directions {
  background: var(--bg-light);
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: var(--border-radius);
}
.step {
  margin: 10px 0;
  padding: 12px;
  background: var(--bg-white);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.step-number {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  margin-right: 8px;
}

/* === PROCESS EVIDENCE / SUBMISSION === */
.process-evidence {
  background: var(--bg-light);
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: var(--border-radius);
}
.evidence-item {
  margin: 8px 0;
  padding-left: 12px;
  border-left: 3px solid var(--primary-light);
}

/* === CHECK UNDERSTANDING PAGES === */
.check-understanding-header {
  margin-bottom: 20px;
}
.understanding-questions ol {
  margin: 12px 0 12px 20px;
}
.understanding-questions li {
  margin-bottom: 16px;
}
.confidence-guidance {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

/* === CONTEXT SECTION === */
.context-section {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
  line-height: 1.8;
}

/* === INSTRUCTION SECTION (unit 06 pattern) === */
.instruction-section {
  margin: 20px 0;
}
.instruction-section h3 {
  color: var(--primary-dark);
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: 6px;
  margin-top: 20px;
}

/* === TEACHER BANNER === */
.teacher-banner {
  background-color: #c0392b;
  color: white;
  padding: 15px 20px;
  border-radius: var(--border-radius);
  margin-bottom: 24px;
  font-weight: 700;
  text-align: center;
  font-size: 1.1rem;
}

/* === QUIZ / ASSESSMENT CLASSES === */
.question-text {
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
  padding: 0.75em;
  background: white;
  border-left: 3px solid #4a90e2;
}
.question-number {
  font-weight: 700;
  font-size: 1.1em;
  color: #4a90e2;
}
.question {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}
.question-section {
  margin: 24px 0;
}
.answer {
  margin: 8px 0;
  padding: 8px 12px;
  background: white;
  border-radius: 4px;
}
.correct-answer {
  background: #e8f5e9;
  padding: 8px 12px;
  border-left: 3px solid #27ae60;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 8px 0;
}
.explanation {
  font-style: italic;
  color: var(--text-secondary);
  margin: 8px 0;
  padding: 8px 12px;
  background: #fff8e1;
  border-left: 3px solid #ffc107;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.multiple-choice-option {
  margin: 4px 0;
  padding: 4px 0;
}

/* === WHATS NEXT (alias for next-steps) === */
.whats-next {
  background: var(--primary-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

/* === SECTION / SUBSECTION === */
.section {
  margin: 20px 0;
}
.section-title {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.15rem;
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.subsection {
  margin: 16px 0;
  padding-left: 12px;
  border-left: 3px solid var(--primary-light);
}
.subsection-title {
  font-weight: 700;
  color: var(--primary-highlight);
  margin-bottom: 8px;
}
.section-content {
  margin: 8px 0;
}

/* === LESSON SECTION (inside teacher/support pages) === */
.lesson-section {
  margin: 24px 0;
  padding: 16px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}

/* === EXEMPLAR === */
.exemplar {
  background: #e8f5e9;
  border-left: 4px solid #27ae60;
  padding: 16px 20px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}
.exemplar-label {
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* === RUBRIC SECTION === */
.rubric-section {
  margin: 20px 0;
}

/* === SCORING LEVELS === */
.scoring-level {
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0;
}
.score-exemplary { background: var(--score-exemplary); }
.score-developing { background: var(--score-developing); }

/* === ACTIVITY ITEM (unit overview trackers) === */
.activity-item {
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--bg-light);
  border-left: 3px solid var(--primary-light);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/* === ASSESSMENT GUIDANCE === */
.assessment-guidance {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}

/* === DIMENSION SECTIONS (self-eval) === */
.dimension-section {
  margin: 20px 0;
  padding: 16px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}
.dimension-title {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.1rem;
  margin-bottom: 8px;
}

/* === INSTRUCTION (generic) === */
.instruction {
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}

/* === DIFFERENTIATION === */
.differentiation-section {
  background: var(--ml-bg);
  border-left: 4px solid var(--ml-border);
  padding: 16px 20px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}

/* === STANDARDS LIST === */
.standards-list {
  margin: 12px 0;
  padding-left: 20px;
}

/* === ACCOMMODATION (teacher SpEd pages) === */
.accommodation-section {
  margin: 20px 0;
  padding: 16px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}
.accommodation-title {
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

/* === TRACKER (unit overviews) === */
.progress-tracker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0;
}
.tracker-category {
  margin: 16px 0;
  font-weight: 700;
  color: var(--primary-dark);
}
.tracker-item {
  display: block;
  margin: 0;
  padding: 4px 8px;
}

/* === SOCIAL TITLE / AI TITLE === */
.social-title {
  font-weight: 700;
  color: #01579b;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ai-title {
  font-weight: 700;
  color: #9e5e00;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.next-title {
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.evidence-title {
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
/* === QUIZ & ASSESSMENT (45 classes) === */

.quiz-container {
  background: var(--bg-light);
  padding: 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.quiz-header {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.15rem;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-light);
}

.quiz-intro {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.questions-section {
  margin: 16px 0;
}

.question-container {
  background: white;
  padding: 16px;
  margin: 12px 0;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--primary-light);
}

.question-block {
  margin: 12px 0;
}

.question-box {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.question-header {
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.question-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
  letter-spacing: 0.5px;
}

.question-type {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: inline-block;
  margin-top: 4px;
}

.assessment-question {
  margin: 16px 0;
  padding: 12px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}

.analysis-questions {
  margin: 12px 0;
}

.multiple-choice {
  margin: 16px 0;
}

.mc-section {
  margin: 12px 0;
}

.mc-question {
  font-weight: 700;
  color: var(--primary-dark);
  margin: 8px 0;
}

.mc-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
  letter-spacing: 0.5px;
}

.mc-options {
  margin: 8px 0;
  padding-left: 16px;
}

.mc-option {
  margin: 6px 0;
  padding: 6px 8px;
}

.mc-answer {
  background: white;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0;
}

.mc-answer-section {
  margin: 12px 0;
}

.answer-block {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.answer-section {
  margin: 16px 0;
}

.answer-key-container {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.answer-key-intro {
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 12px;
}

.answer-item {
  background: white;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
}

.answer-label {
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.answer-number {
  font-weight: 700;
  color: var(--primary-dark);
  display: inline-block;
  margin-right: 8px;
}

.answer-option {
  margin: 4px 0;
  padding: 4px 0;
}

.answer-text {
  color: var(--text-primary);
  margin: 4px 0;
}

.answer-space {
  border-bottom: 1px solid #999;
  min-height: 30px;
  margin: 12px 0;
}

.short-answer-section {
  margin: 16px 0;
}

.short-answer-instructions {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--bg-light);
  border-radius: 4px;
}

.short-answer-space {
  border: 1px dashed #999;
  min-height: 80px;
  padding: 8px;
  margin: 12px 0;
  border-radius: 4px;
  background: white;
}

.short-answer-text {
  font-style: italic;
  color: var(--text-secondary);
}

.short-answer-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.question-answer {
  margin: 12px 0;
}

.correct-answer-text {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 8px 12px;
  border-left: 3px solid #27ae60;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 8px 0;
}

.distractors {
  color: var(--text-secondary);
  font-style: italic;
  margin: 8px 0;
  padding: 8px 12px;
}

.answer-explanation {
  font-style: italic;
  color: var(--text-secondary);
  padding: 8px 12px;
  background: #fff8e1;
  border-left: 3px solid #ffc107;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 8px 0;
}

/* === RUBRIC & SCORING (25 classes) === */

.rubric {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.rubric-callout {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.rubric-guidance {
  font-style: italic;
  color: var(--text-secondary);
  padding: 8px 12px;
  margin: 8px 0;
}

.rubric-reference {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border: 1px solid var(--primary-light);
}

.rubric-level {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.criteria-box {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border-left: 4px solid var(--primary-light);
}

.dimension-block {
  background: white;
  padding: 16px;
  margin: 12px 0;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--primary-light);
}

.dimension-name {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1rem;
  margin-bottom: 8px;
}

.dimension-number {
  display: inline-block;
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 6px;
  font-weight: 700;
}

.dimension-score {
  font-weight: 700;
  color: var(--primary-dark);
  margin: 8px 0;
}

.dimension-evidence {
  font-style: italic;
  color: var(--text-secondary);
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--bg-light);
  border-radius: 4px;
}

.score {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.85rem;
}

.score-3 {
  background: #c6efce;
  color: #1b5e20;
}

.score-4 {
  background: #1b7d44;
  color: white;
}

.proficient {
  background: #e8f5e9;
  border-left: 4px solid #27ae60;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 8px 0;
}

.proficient-label {
  font-weight: 700;
  color: #2e7d32;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.overall-score {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary-dark);
  margin: 12px 0;
}

.scoring-guide {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.scoring-guidance {
  margin: 12px 0;
  padding: 12px 16px;
  background: white;
  border-radius: var(--border-radius);
}

.scoring-label {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.revision-score {
  font-weight: 700;
  color: var(--text-secondary);
  margin: 8px 0;
}

.calibration-note {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
  font-style: italic;
  font-size: 0.9rem;
}

.doak-level,
.dok-level {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.level {
  margin: 8px 0;
  padding: 8px 12px;
}

/* === GUIDANCE & INSTRUCTION (21 classes) === */

.guidance {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.guidance-box {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.guidance-section {
  margin: 16px 0;
}

.guidance-content {
  padding: 12px 0;
}

.guidance-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
  letter-spacing: 0.5px;
}

.guidance-title {
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.directions-section {
  margin: 16px 0;
}

.direction-step {
  margin: 8px 0;
  padding: 8px 12px;
}

.direction-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2e4e42;
  color: #fff9c4;
  font-weight: 700;
  font-size: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.instructions-box {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
  border-left: 4px solid var(--primary-light);
}

.instruction-block {
  margin: 12px 0;
  padding: 8px;
}

.instruction-item {
  margin: 6px 0;
}

.activity-guidance {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.discussion-guidance {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 12px 0;
  border-left: 4px solid #2e7d32;
}

.sel-guidance {
  background: var(--sel-bg);
  border-left: 4px solid var(--sel-border);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.strategy-box {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.strategy-label {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.85rem;
}

.highlight-instruction {
  background: #fff9e6;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
}

.metadata {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 0;
}

.section-header {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--primary-dark);
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: 6px;
  margin: 20px 0 12px 0;
}

.q-header {
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-lesson {
  background: var(--badge-page);
  color: var(--badge-page-text);
}

.unit-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.category-title {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.1rem;
  margin: 16px 0 8px 0;
}

.summary-title {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.15rem;
  margin: 16px 0 8px 0;
}

.tag-label {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.note-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
  letter-spacing: 0.5px;
}

.evidence-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.standards-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
  letter-spacing: 0.5px;
}

.connections-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.content-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.discussion-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.criterion-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.check-label,
.check-title {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.choice-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary-dark);
}

.excerpt-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.pacing-label {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pitfall-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #c62828;
}

.priority-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.scene-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.struggle-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #c62828;
}

.version-label {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.checkbox-label {
  font-weight: 500;
  color: var(--text-primary);
  margin-left: 6px;
}

.process-evidence-title {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1rem;
}

.ai-integrity-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #9e5e00;
  letter-spacing: 0.5px;
}

.alt-label {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* === CONTAINERS & BOXES (52 classes) === */

.content-wrapper {
  background: white;
  padding: 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.main-section {
  margin: 20px 0;
}

.section-divider {
  border-bottom: 1px solid var(--primary-light);
  margin: 20px 0;
  padding-bottom: 0;
}

.overview-box {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.description-box {
  background: white;
  padding: 16px;
  border-radius: var(--border-radius);
  border: 1px solid var(--primary-light);
  margin: 12px 0;
}

.intro-section {
  margin: 20px 0;
}

.closing-section {
  margin: 20px 0;
}

.context-box {
  background: #f5f5f5;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 12px 0;
  border-left: 4px solid var(--primary-light);
}

.assessment-box {
  background: #f3e5f5;
  border-left: 4px solid #7b1fa2;
  padding: 16px 20px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}

.alt-assessment-box {
  background: #ede7f6;
  border-left: 4px solid #512da8;
  padding: 16px 20px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}

.note-box {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.warning-box {
  background: #ffebee;
  border-left: 4px solid #c62828;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.info-box {
  background: #f5f5f5;
  border-left: 4px solid #424242;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.info-box-blue {
  background: #e3f2fd;
  border-left: 4px solid #1976d2;
}

.info-box-green {
  background: #e8f5e9;
  border-left: 4px solid #388e3c;
}

.info-box-light-blue {
  background: #e1f5fe;
  border-left: 4px solid #0288d1;
}

.info-box-orange {
  background: #fff3e0;
  border-left: 4px solid #f57c00;
}

.highlight-box {
  background: #e0f2f1;
  border-left: 4px solid #00897b;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.check-section {
  background: #e8f5e9;
  border-left: 4px solid #27ae60;
  padding: 16px 20px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 16px 0;
}

.check-block {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.reflection-section {
  margin: 20px 0;
}

.tag-section {
  margin: 12px 0;
  padding: 12px;
}

.priority-box {
  background: #fff3e0;
  border-left: 4px solid #f57f17;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.strength-box {
  background: #e8f5e9;
  border-left: 4px solid #27ae60;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.improvement-box {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.revision-box {
  background: #ede7f6;
  border-left: 4px solid #512da8;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.exemplar-section {
  margin: 16px 0;
}

.exemplar-box {
  background: #e8f5e9;
  border-left: 4px solid #27ae60;
  padding: 16px 20px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.scenario-section {
  margin: 20px 0;
}

.scenario-box {
  background: #f3e5f5;
  padding: 16px 20px;
  border-radius: var(--border-radius);
  border-left: 4px solid #7b1fa2;
}

.story-box {
  background: #ede7f6;
  padding: 16px 20px;
  border-radius: var(--border-radius);
}

.passage-box {
  background: white;
  padding: 16px 20px;
  border-radius: var(--border-radius);
  border: 1px solid var(--primary-light);
  margin: 16px 0;
}

.scene-container {
  margin: 16px 0;
  padding: 12px;
}

.community-box {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 12px 0;
}

.area-box {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  border: 1px solid #e0e0e0;
  margin: 8px 0;
}

.option-box {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border-left: 4px solid var(--primary-light);
}

.role-box {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.process-box {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 8px 0;
}

.reveal-box {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border: 1px dashed var(--primary-light);
}

.metric-box {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.tier-box {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--primary-light);
  margin: 8px 0;
}

.template-box {
  background: #f5f5f5;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.technique-box {
  background: var(--ml-bg);
  border-left: 4px solid var(--ml-border);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 8px 0;
}

.summary-box {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.welcome-section {
  margin: 20px 0;
}

.quest-hook-container {
  background: #f3e5f5;
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.skill-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.hook-type-section {
  margin: 12px 0;
}

.analysis-section {
  margin: 16px 0;
  padding: 12px;
}

.choice-section {
  margin: 12px 0;
}

.choice-options-section {
  margin: 12px 0;
  padding-left: 12px;
}

.sa-section {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.response-area {
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  min-height: 60px;
}

.sentence-frames-section {
  margin: 16px 0;
}

.activity-name {
  font-weight: 700;
  color: var(--primary-dark);
}

.activity-context {
  font-style: italic;
  color: var(--text-secondary);
  margin: 8px 0;
  padding: 8px 12px;
}

.activity-code {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  background: #f5f5f5;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0;
}

.badge-activity {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.exercise-box {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 12px 0;
}

.exercise-number {
  display: inline-block;
  font-weight: 700;
  color: var(--primary-dark);
  margin-right: 6px;
}

.task-section {
  margin: 12px 0;
}

/* === DIFFERENTIATION & SUPPORT (7 classes) === */

.accommodation-category {
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}

.differentiation-category {
  background: var(--ml-bg);
  border-left: 4px solid var(--ml-border);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.iep-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.iep-table th {
  background: var(--primary-dark);
  color: white;
  padding: 12px;
  text-align: left;
  font-weight: 700;
}

.iep-table td {
  border-bottom: 1px solid var(--primary-light);
  padding: 12px;
}

.ml-support-item {
  background: var(--ml-bg);
  padding: 8px 12px;
  border-left: 4px solid var(--ml-border);
  border-radius: 0 4px 4px 0;
  margin: 6px 0;
}

.struggle-point {
  background: #ffebee;
  border-left: 4px solid #c62828;
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
  margin: 6px 0;
}

.struggle-points {
  margin: 12px 0;
}

.support-heading {
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

/* === SEL & REFLECTION (5 classes) === */

.sel-content {
  background: var(--sel-bg);
  border-left: 4px solid var(--sel-border);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.sel-reflection {
  background: var(--sel-bg);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.self-check {
  background: var(--ml-bg);
  border-left: 4px solid var(--ml-border);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/* === PEER REVIEW & CHECKLISTS (8 classes) === */

.checklist {
  margin: 12px 0;
  padding-left: 20px;
}

.checklist input[type="checkbox"] {
  margin-right: 8px;
}

.checklist li {
  margin-bottom: 8px;
}

.confidence-checklist {
  margin: 12px 0;
}

.confidence-item {
  margin: 8px 0;
  padding: 8px 12px;
  background: white;
  border-radius: 4px;
}

.confidence-high {
  border-left: 4px solid #27ae60;
}

.confidence-medium {
  border-left: 4px solid #ffc107;
}

.tag-item {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  margin: 4px 4px 4px 0;
  background: var(--bg-light);
  border: 1px solid var(--primary-light);
}

.tag-letter {
  font-weight: 700;
  color: var(--primary-dark);
}

.tag-protocol {
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}

/* === EXEMPLAR & SAMPLES (8 classes) === */

.exemplar-response {
  background: #e8f5e9;
  border-left: 4px solid #27ae60;
  padding: 16px 20px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.exemplar-heading {
  font-weight: 700;
  color: #2e7d32;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.assignment-exemplar {
  background: #e8f5e9;
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 12px 0;
}

.sample-response {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--primary-light);
  margin: 8px 0;
}

.example-text {
  font-style: italic;
  color: var(--text-secondary);
  background: var(--bg-light);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
}

.example-dialogue {
  background: #f5f5f5;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border-left: 4px solid #666;
}

.hook-example {
  background: #f3e5f5;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.version-example {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border: 1px solid #e0e0e0;
}

/* === NARRATIVE CONTENT (8 classes) === */

.passage {
  background: white;
  padding: 16px 20px;
  border-radius: var(--border-radius);
  border: 1px solid var(--primary-light);
  margin: 16px 0;
  line-height: 1.8;
}

.excerpt {
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.8;
  color: var(--text-primary);
  background: var(--bg-light);
  padding: 20px 24px;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 0 0 16px 0;
}

.scenario-starter {
  background: #f3e5f5;
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.dialogue-scene {
  background: #f5f5f5;
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.dialogue-text {
  margin: 8px 0;
  padding: 4px 0;
}

.dialogue-line {
  margin: 6px 0;
  padding-left: 12px;
  border-left: 3px solid var(--primary-light);
}

.scene-text {
  font-style: italic;
  color: var(--text-secondary);
  margin: 8px 0;
}

.character-descriptions {
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}

/* === NOTES & CALLOUTS (8 classes) === */

.note {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.pitfall {
  background: #ffebee;
  border-left: 4px solid #c62828;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
  font-weight: 500;
}

.pacing-notes {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 8px 0;
  padding: 8px 12px;
  background: #f5f5f5;
  border-left: 3px solid var(--text-muted);
  border-radius: 0 4px 4px 0;
}

.scenario-note {
  background: #fff9e6;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px 0;
  font-size: 0.9rem;
}

.sa-note {
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 6px 0;
}

.minimum-note {
  background: #fff8e1;
  border-left: 3px solid #ffc107;
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
  margin: 8px 0;
  font-size: 0.85rem;
}

.no-ai-note {
  background: #ffebee;
  border-left: 3px solid #c62828;
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
  margin: 8px 0;
}

.ai-policy-note {
  background: #fff3e0;
  border-left: 3px solid #f57f17;
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
  margin: 8px 0;
  font-size: 0.9rem;
}

/* === REVISION & FEEDBACK (11 classes) === */

.revision-history {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.revision-item {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border-left: 4px solid var(--primary-light);
}

.revision-note {
  font-style: italic;
  color: var(--text-secondary);
  margin: 4px 0;
}

.revision-opportunity {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.revision-version {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.change-list {
  margin: 8px 0;
  padding-left: 20px;
}

.change-positive {
  color: #2e7d32;
  font-weight: 500;
}

.change-neutral {
  color: var(--text-primary);
}

.improvement-list {
  margin: 8px 0;
  padding-left: 20px;
}

.version-flat {
  background: white;
  padding: 12px 16px;
  border-radius: 4px;
  margin: 4px 0;
}

.version-rich {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 4px 0;
  border-left: 4px solid var(--primary-light);
}

.feedback-emphasis {
  font-weight: 700;
  color: #c62828;
}

/* === PACING & TRACKING (6 classes) === */

.pacing {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 8px 0;
}

.timeline {
  margin: 16px 0;
  padding: 12px 20px;
  background: var(--bg-light);
  border-radius: var(--border-radius);
}

.timeline-item {
  margin: 8px 0;
  padding: 8px 12px;
  background: white;
  border-radius: 4px;
}

.tracker-intro {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.tracker-items {
  margin: 12px 0;
}

.unit-schedule {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

/* === HERO IMAGE === */
.hero-image {
  margin: 20px 0;
}
.hero-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* === PAGE STRUCTURE (9 classes) === */

.page-footer {
  background: var(--bg-light);
  padding: 16px 20px;
  border-top: 1px solid var(--primary-light);
  margin-top: 30px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.intro-text {
  font-style: italic;
  color: var(--text-secondary);
  margin: 8px 0;
}

.summary-intro {
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.overall-summary {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.summary-stat {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  text-align: center;
  border-left: 4px solid var(--primary-light);
}

.what-next {
  background: var(--primary-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

/* === AI POLICY (1 class) === */

.ai-integrity {
  background: #fff3e0;
  border-left: 4px solid #f57f17;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

/* === VOCABULARY (3 classes) === */

.key-vocabulary {
  background: var(--bg-light);
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin: 16px 0;
}

.revision-key-changes {
  background: #ede7f6;
  border-left: 4px solid #512da8;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/* === OTHER (48 classes) === */

.accomplishments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.accomplishment-card {
  background: #e8f5e9;
  border-left: 4px solid #27ae60;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.alt-assessment-item {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border: 1px solid #e0e0e0;
}

.analysis-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.analysis-table th {
  background: var(--primary-dark);
  color: white;
  padding: 12px;
  text-align: left;
  font-weight: 700;
}

.analysis-table td {
  border-bottom: 1px solid var(--primary-light);
  padding: 12px;
}

.annotation {
  background: #fffacd;
  padding: 4px 6px;
  border-radius: 3px;
  font-size: 0.9rem;
}

.ask {
  font-style: italic;
  color: #01579b;
  font-weight: 500;
}

.give {
  font-style: italic;
  color: #2e7d32;
  font-weight: 500;
}

.tell {
  font-style: italic;
  color: var(--primary-dark);
  font-weight: 500;
}

.assignment-context {
  font-style: italic;
  color: var(--text-secondary);
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--bg-light);
  border-radius: 4px;
}

.assignment-updates {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.brainstorm-part {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  padding: 8px 12px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 4px 0;
}

.button {
  display: inline-block;
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}

.button:hover {
  background: var(--primary-dark);
}

.capstone-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.category-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  vertical-align: middle;
}

.choice {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border-left: 4px solid var(--primary-light);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.comparison-table th {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 12px;
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid var(--primary);
}

.comparison-table td {
  border-bottom: 1px solid var(--primary-light);
  padding: 12px;
}

.connections {
  background: #e0f2f1;
  border-left: 4px solid #00897b;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.content {
  margin: 8px 0;
  padding: 8px 0;
}

.content-additions {
  background: #c8e6c9;
  border-left: 4px solid #2e7d32;
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
  margin: 4px 0;
  font-size: 0.9rem;
}

.dok-distribution {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.evidence {
  background: #e3f2fd;
  border-left: 4px solid #1565c0;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.extended {
  background: #f3e5f5;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.extended-response-text {
  font-style: italic;
  color: var(--text-secondary);
  margin: 8px 0;
}

.location-option {
  background: white;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0;
  border-left: 3px solid var(--primary-light);
}

.part-number {
  display: inline-block;
  font-weight: 700;
  color: var(--primary-dark);
  margin-right: 6px;
}

.pathway-card {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border-left: 4px solid var(--primary-light);
}

.pathways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.planning-template {
  background: #f5f5f5;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.priority-list {
  margin: 8px 0;
  padding-left: 20px;
}

.priority-ranking {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.pull-quote {
  border-left: 4px solid var(--primary);
  padding-left: 20px;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin: 16px 0;
  line-height: 1.6;
}

.push-to-4 {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.q-number {
  display: inline-block;
  font-weight: 700;
  color: var(--primary-dark);
  margin-right: 6px;
}

.q-text {
  color: var(--text-primary);
}

.quest-text {
  font-style: italic;
  color: #7b1fa2;
  font-weight: 500;
}

.recommendations {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.requirements {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border-left: 4px solid var(--primary-light);
}

.row-number {
  display: inline-block;
  font-weight: 700;
  color: var(--text-muted);
}

.standards {
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.student-choice {
  background: #e8f5e9;
  border-left: 4px solid #27ae60;
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
  margin: 4px 0;
  font-size: 0.9rem;
}

.tier-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.trading-post-option {
  background: #fff3e0;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
}

.word-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 0;
}

.writing-space {
  border: 1px dashed #999;
  min-height: 100px;
  padding: 8px;
  margin: 12px 0;
  border-radius: 4px;
  background: white;
}

.your-work {
  background: white;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin: 8px 0;
  border-left: 4px solid var(--primary-light);
}

/* === MISSED CLASSES === */
.activity-accommodation {
  background: var(--ml-bg);
  border-left: 4px solid var(--ml-border);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

.mc-answers-group {
  margin: 8px 0 16px 0;
}

/* === SESSION 19: Undefined class definitions === */

/* Callout using primary palette (green) instead of gold */
.callout-primary {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
}

/* Preformatted code/dialogue examples */
.code-block {
  background: #f5f5f5;
  border-left: 4px solid #424242;
  padding: 12px 16px;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 12px 0;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  overflow-x: auto;
}

/* Bold dark heading for use inside colored boxes */
.heading-accent {
  color: var(--text-primary);
  font-weight: 700;
}

/* Left indentation for nested content */
.indent {
  margin-left: 2rem;
  padding-left: 1rem;
}

/* Spaced list items (two aliases for same pattern) */
.list-item-spaced li,
.list-spaced li {
  margin-bottom: 12px;
  line-height: 1.7;
}

/* Remove top margin (utility class) */
.no-margin-top {
  margin-top: 0 !important;
}

/* Vertical spacing utility */
.spacing {
  margin: 16px 0;
}

/* Top spacing utility */
.spacing-top {
  margin-top: 20px;
}

/* Submit button (mirrors .button styles) */
.submit-button {
  display: inline-block;
  padding: 8px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}

.submit-button:hover {
  background: var(--primary-dark);
}

/* Centered wrapper for submit buttons */
.submit-container {
  text-align: center;
  margin-top: 24px;
}

/* Alternative table header row */
.table-header-alt {
  background: #e0e0e0;
  font-weight: 700;
}

.table-header-alt th {
  color: var(--text-primary);
  padding: 12px;
  text-align: left;
}

/* Emphasis row in tables */
.table-header-emphasis {
  background: #f0f0f0;
  font-weight: 700;
}

.table-header-emphasis td {
  padding: 12px;
}

/* Dark text override for headings */
.text-dark {
  color: var(--text-primary);
  font-weight: 700;
}

/* Metadata text (sources, citations) */
.text-metadata {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 8px 0;
}

/* Muted italic text (instructions, placeholders) */
.text-muted-italic {
  color: var(--text-muted);
  font-style: italic;
}

/* === ACCESSIBILITY UTILITIES === */

/* Screen-reader-only content (WCAG 1.3.1) */
.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;
}

/* Respect reduced-motion preferences (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}