/* ═══════════════════════════════════════════════════════
   THE LAB · style.css — a copy of the Math Module 2 styles in the Lab's teal,
   at the kid text size (Marcos 10/9: body ~21px, nothing a student reads under 16px)
═══════════════════════════════════════════════════════ */
:root {
  --primary:      #0e7c6b;
  --primary-dark: #095448;
  --secondary:    #f39c12;
  --secondary-dk: #c49f0a;
  --teal:         #1abc9c;
  --teal-dark:    #148f77;
  --card-bg:      #ffffff;
  --text:         #333;
  --locked-bg:    #e9ecef;
  --correct:      #27ae60;
  --correct-dk:   #1e8449;
  --danger:       #c0392b;
  --danger-dk:    #a93226;
  --fs:           1.05rem;
}

* { box-sizing: border-box; }
html { font-size: 125%; }   /* 1rem = 20px: the MM2 sizes scaled up to the kid text size */

body {
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  background: linear-gradient(135deg, #0e7c6b 0%, #1f5fa8 100%);
  color: var(--text);
  margin: 0; padding: 0;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── CONTAINER ─────────────────────────────────────── */
.container {
  max-width: 820px;
  margin: 2rem auto;
  background: var(--card-bg);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  min-height: 50vh;
  position: relative;
  z-index: 10;
}

h1 {
  text-align: center;
  color: var(--primary);
  letter-spacing: 1px;
  margin-top: 0;
  font-size: 1.75rem;
}

.welcome-sub {
  text-align: center;
  color: #888;
  font-size: 0.88rem;
  margin: -14px 0 26px;
  letter-spacing: 0.5px;
}

/* ── FRACTIONS ─────────────────────────────────────── */
.fraction {
  display: inline-flex; flex-direction: column;
  align-items: center; vertical-align: middle;
  margin: 0 4px; font-size: 0.88em; line-height: 1.15;
}
.frac-top  { display: block; border-bottom: 2px solid currentColor; padding: 0 4px; text-align: center; min-width: 1em; }
.frac-bottom { display: block; padding: 0 4px; text-align: center; min-width: 1em; }
.mixed-num { display: inline-flex; align-items: center; vertical-align: middle; gap: 3px; }

/* ── BUTTONS ───────────────────────────────────────── */
.lgs-btn {
  display: inline-block;
  margin-top: 14px;
  background: var(--primary);
  color: white;
  border: none;
  padding: 16px 44px;
  border-radius: 14px;
  font-size: 1.2rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--primary-dark);
  transition: transform 0.1s;
}
.lgs-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--primary-dark); }

.start-btn {
  background: var(--primary);
  color: white;
  padding: 18px 28px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: bold;
  box-shadow: 0 5px 0 var(--primary-dark);
  transition: transform 0.1s;
  flex: 1 1 160px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.start-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--primary-dark); }
.start-btn.locked { background: #7f8c8d !important; box-shadow: 0 5px 0 #566573 !important; cursor: default; }
.start-btn.locked:hover { transform: none; box-shadow: 0 5px 0 #566573 !important; }

.form-btn-sub { font-size: 0.8em; font-weight: normal; opacity: 0.88; }

/* Same colors as the rounding sites: Practice A green, Practice B teal, Review blue; the Test keeps the site's violet */
.start-btn.review-btn { background: #2e86c1; box-shadow: 0 5px 0 #1f618d; }
.start-btn.review-btn:hover { box-shadow: 0 8px 0 #1f618d; }
#review-card .step-label { color: #2e86c1; }
.start-btn.practice-b-btn { background: #16a085; box-shadow: 0 5px 0 #0e6655; }
.start-btn.practice-b-btn:hover { box-shadow: 0 8px 0 #0e6655; }
#practice-b-card .step-label { color: #138d75; }
.practice-b-dir    { background: #e8f8f5; border-color: #76d7c4; }
.practice-b-dir h3 { color: #117864; }
.form-note { margin: 4px 0 0; text-align: center; font-size: 0.86rem; color: #555; }

.score-btn {
  background: var(--secondary);
  color: #5a3000;
  padding: 12px 26px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: var(--fs);
  font-family: inherit;
  font-weight: bold;
  box-shadow: 0 5px 0 var(--secondary-dk);
  transition: transform 0.1s;
  margin-top: 10px;
}
.score-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--secondary-dk); }

.ready-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: var(--teal);
  color: white;
  font-size: 1.15rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--teal-dark);
  transition: transform 0.1s;
  margin-top: 10px;
}
.ready-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--teal-dark); }

.resume-btn {
  background: #e67e22;
  color: white;
  padding: 13px 26px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: var(--fs);
  font-family: inherit;
  font-weight: bold;
  box-shadow: 0 5px 0 #a85813;
  transition: transform 0.1s;
}
.resume-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #a85813; }

.sign-in-btn {
  width: 100%;
  padding: 13px;
  margin-top: 4px;
  border: none;
  border-radius: 12px;
  background: var(--teal);
  color: white;
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--teal-dark);
  transition: transform 0.1s;
}
.sign-in-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--teal-dark); }

.action-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 13px 26px;
  border-radius: 12px;
  font-size: var(--fs);
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  box-shadow: 0 4px 0 var(--primary-dark);
  transition: transform 0.1s;
}
.action-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--primary-dark); }
.action-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-dark); }
.action-btn:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; transform: none; }

#confirm-btn { background: var(--teal); box-shadow: 0 4px 0 var(--teal-dark); }
#confirm-btn:hover:not(:disabled) { box-shadow: 0 6px 0 var(--teal-dark); }

.speak-btn {
  background: none;
  border: 2px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 6px 10px;
  min-width: 42px;
  flex-shrink: 0;
}

/* ── LOGIN / STEPS ─────────────────────────────────── */
.step-card {
  background: #fafafa;
  border: 2px solid #ececec;
  border-radius: 16px;
  padding: 20px 22px 16px;
  margin-bottom: 16px;
}
.step-label {
  display: block;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--primary);
  margin-bottom: 14px;
}
.login-box label {
  font-size: var(--fs);
  font-weight: bold;
  color: #555;
  display: block;
  margin-bottom: 6px;
}
.login-box select,
.login-box input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 2px solid #ccc;
  font-size: var(--fs);
  font-family: inherit;
  margin-bottom: 14px;
}
.login-box select:focus,
.login-box input:focus { outline: none; border-color: var(--primary); }
.login-error {
  color: var(--danger);
  font-size: 0.95rem;
  font-weight: bold;
  text-align: center;
  min-height: 22px;
  margin-bottom: 4px;
}

#resume-container {
  background: #fff8f0;
  border: 2px solid #f0c080;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 16px;
  text-align: center;
}

.start-grid {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* ── DIRECTIONS ────────────────────────────────────── */
.dir-section {
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
  border: 2px solid transparent;
}
.dir-section h3 { margin: 0 0 7px; font-size: var(--fs); }
.dir-section p  { margin: 0; font-size: 0.93rem; line-height: 1.65; color: #444; }
.dir-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 7px; }

.login-dir   { background: #eafaf1; border-color: #a9dfbf; }
.login-dir h3 { color: #1e8449; }
.form-dir    { background: #eaf2ff; border-color: #a9c4f5; }
.form-dir h3  { color: #2471a3; }
.attempts-dir { background: #fde8f0; border-color: #f48fb1; }
.attempts-dir h3 { color: #ad1457; }
.read-dir    { background: #fff8e7; border-color: #ffc107; }
.read-dir h3  { color: #856404; }
.soak-dir    { background: #e8f8f8; border-color: #76d7c4; }
.soak-dir h3  { color: #0e6655; }
.timer-dir   { background: #f1fbe9; border-color: #8bc34a; }   /* light, like the other boxes (Marcos 10/6) */
.timer-dir h3 { color: #4a7a1f; }

.timer-chip {
  display: inline-block;
  border-radius: 20px;
  padding: 3px 14px;
  font-size: 0.82rem;
  font-weight: bold;
  margin-top: 8px;
}
.chip-amber  { background: #fff3cd; border: 2px solid #ffc107; color: #856404; }
.chip-teal   { background: #d1ecf1; border: 2px solid #17a2b8; color: #0c5460; }
.chip-green  { background: #e2f4d3; border: 2px solid #8bc34a; color: #3d6b14; }

/* ── QUIZ SCREEN ───────────────────────────────────── */
.q-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.q-badge-pill {
  background: var(--primary);
  color: white;
  border-radius: 50px;
  padding: 6px 18px;
  font-size: var(--fs);
  font-weight: bold;
}
.score-badge {
  background: var(--secondary);
  color: #5a3000;
  border-radius: 50px;
  padding: 6px 18px;
  font-size: var(--fs);
  font-weight: bold;
}

.streak-bar {
  text-align: center;
  font-size: 1.4rem;
  min-height: 34px;
  margin-bottom: 6px;
  transition: all 0.3s;
}

.progress-bar {
  height: 12px;
  background: #e9ecef;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  width: 0%;
  transition: width 0.4s ease;
}

.timer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.timer-display {
  background: #2c3e50;
  color: #2ecc71;
  border-radius: 10px;
  padding: 6px 18px;
  font-size: 1.2rem;
  font-family: monospace;
  font-weight: bold;
  letter-spacing: 2px;
  min-width: 80px;
  text-align: center;
}
.timer-display.warning { color: #e74c3c; }

/* Instructions lock bar (purple) */
.instruct-timer-bar {
  background: #f3e8ff;
  border: 2px solid #9b59b6;
  border-radius: 10px;
  padding: 8px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.93rem;
  font-weight: bold;
  color: #6c3483;
}
.instruct-timer-fill-wrap { flex: 1; height: 8px; background: #e8d5f5; border-radius: 4px; overflow: hidden; }
.instruct-timer-fill { height: 100%; background: #9b59b6; width: 100%; border-radius: 4px; transition: width 0.25s linear; }

/* Reading lock bar (amber) */
.reading-timer-bar {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 10px;
  padding: 8px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.93rem;
  font-weight: bold;
  color: #856404;
}
.reading-timer-fill-wrap { flex: 1; height: 8px; background: #ffe69c; border-radius: 4px; overflow: hidden; }
.reading-timer-fill { height: 100%; background: var(--primary); width: 100%; border-radius: 4px; transition: width 0.25s linear; }
.reading-timer-count { min-width: 28px; text-align: right; font-size: var(--fs); }

/* Next soak bar (teal) */
.next-timer-bar {
  background: #d1ecf1;
  border: 2px solid #17a2b8;
  border-radius: 10px;
  padding: 8px 16px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.93rem;
  font-weight: bold;
  color: #0c5460;
}
.next-timer-fill-wrap { flex: 1; height: 8px; background: #bee5eb; border-radius: 4px; overflow: hidden; }
.next-timer-fill { height: 100%; background: #17a2b8; width: 100%; border-radius: 4px; transition: width 0.25s linear; }

.question-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
h2#question-text {
  font-size: 1.2rem;
  margin: 0;
  color: #2c3e50;
  line-height: 2.0;
  flex: 1;
}

.options-grid { display: grid; gap: 12px; }

.answer-row { display: flex; align-items: stretch; gap: 8px; }

button.choice-speak-btn {
  flex-shrink: 0;
  width: 40px;
  background: #f0f4ff;
  border: 2px solid #c5d5f5;
  border-radius: 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
button.choice-speak-btn:hover { background: #dce8ff; transform: scale(1.1); }

.answer-row button.answer-btn { flex: 1; }

button.answer-btn {
  background: white;
  color: var(--primary);
  border: 3px solid #e0e0e0;
  padding: 13px 15px;
  border-radius: 14px;
  font-size: var(--fs);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: block;
  transition: all 0.2s;
  box-shadow: 0 4px 0 #e0e0e0;
  white-space: normal;
  word-wrap: break-word;
  min-height: 54px;
  line-height: 1.8;
}
button.answer-btn:hover:not(:disabled) {
  background: #fef5e7;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #f0a500;
}
button.answer-btn.selected  { background: #fff9c4; border-color: #f9a825; border-width: 3px; font-weight: bold; box-shadow: 0 4px 0 #f57f17; }
button.answer-btn:disabled  { cursor: not-allowed; opacity: 0.78; }
button.answer-btn.locked-choice { background: var(--locked-bg); color: #999; cursor: not-allowed; border-color: #ccc; transform: none; box-shadow: none; }
button.answer-btn.correct   { background: #d4edda; border-color: #28a745; color: #155724; box-shadow: 0 4px 0 #28a745; }
button.answer-btn.incorrect { background: #f8d7da; border-color: #dc3545; color: #721c24; box-shadow: 0 4px 0 #dc3545; }

.wrd { display: inline; }
.wrd.hl { background: #ffe01b; border-radius: 3px; padding: 0 2px; }

.feedback-box {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  display: none;
  font-size: var(--fs);
  border: 2px solid transparent;
  line-height: 1.6;
}
.feedback-box.correct   { display: block; background: #d4edda; border-color: #28a745; color: #155724; }
.feedback-box.incorrect { display: block; background: #f8d7da; border-color: #dc3545; color: #721c24; }

.controls {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ── END SCREEN ────────────────────────────────────── */
#final-percent {
  font-size: 5rem;
  font-weight: bold;
  color: var(--primary);
  display: block;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.6s ease, transform 0.6s ease;
  margin: 10px 0;
  text-align: center;
}
#final-percent.revealed { opacity: 1; transform: scale(1); }

.missed-list {
  text-align: left;
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0;
  max-height: 260px;
  overflow-y: auto;
}
.missed-list h3 { margin: 0 0 10px; color: #856404; font-size: var(--fs); }
.missed-item {
  background: white;
  border-left: 4px solid var(--danger);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.missed-item .mi-label { color: var(--danger); font-weight: bold; font-size: 0.8rem; }

.end-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* ── SCOREBOARD ────────────────────────────────────── */
.sb-summary-row { display: flex; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.sb-summary-card { flex: 1 1 120px; background: #f9f9f9; border: 2px solid #e0e0e0; border-radius: 14px; padding: 14px 12px; text-align: center; }
.sb-summary-label { font-size: 0.8rem; font-weight: 800; color: #888; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.sb-summary-grade { font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.sb-summary-score { font-size: 0.82rem; font-weight: 700; color: #555; }
.sb-summary-attempt { font-size: 0.8rem; color: #aaa; margin-top: 4px; }

.scoreboard-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.93rem; }
.scoreboard-table th, .scoreboard-table td { border-bottom: 2px solid #eee; padding: 9px 10px; text-align: center; }
.scoreboard-table th { color: var(--primary); }
.score-good { color: var(--correct);  font-weight: bold; }
.score-ok   { color: #f39c12;         font-weight: bold; }
.score-bad  { color: var(--danger);   font-weight: bold; }

/* ── PIN MODAL ─────────────────────────────────────── */
#pin-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.55);
  z-index: 500;
}
.pin-modal-inner {
  background: white;
  border-radius: 20px;
  padding: 2rem 2rem 1.5rem;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  font-family: inherit;
  position: relative;
  z-index: 501;
}

/* ── CONFETTI ──────────────────────────────────────── */
#confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 99;
}

/* ── UTILITY ───────────────────────────────────────── */
.hidden { display: none !important; }

/* THE COVER (Marcos 10/22: "the title needs to be bigger. It gives little brother vibes compared to the green
   button"): only while the welcome panel shows, the title and its line are big; every other screen keeps 1.75rem. */
.container:has(#start-screen:not(.hidden) #welcome-panel:not(.hidden)) > h1 { font-size: 3.4rem; letter-spacing: 1.5px; margin-bottom: 18px; }
.container:has(#start-screen:not(.hidden) #welcome-panel:not(.hidden)) > .welcome-sub { font-size: 1.3rem; margin-top: -6px; }
@media(max-width: 600px) {
  .container:has(#start-screen:not(.hidden) #welcome-panel:not(.hidden)) > h1 { font-size: 2.5rem; }
  .container:has(#start-screen:not(.hidden) #welcome-panel:not(.hidden)) > .welcome-sub { font-size: 1.05rem; }
}

@media(max-width: 600px) {
  .container { margin: 10px; padding: 1.4rem; }
  h1 { font-size: 1.25rem; }
  button.answer-btn { font-size: 0.95rem; padding: 11px 12px; }
  #final-percent { font-size: 3.5rem; }
}

/* ── CLOSED-TO-STUDENTS LOCK ── */
.lgs-btn.locked,
.lgs-btn.locked:hover { background: #b8b8b8; box-shadow: 0 5px 0 #8f8f8f; cursor: not-allowed; transform: none; filter: grayscale(1); }
.locked-note { color: #888; font-size: 0.95rem; margin: 14px 0 0; }

/* ── PART 2 — WRITTEN (copied from the Module 16 Test) ── */
.part-badge { display: inline-block; background: var(--primary); color: #fff; font-size: 0.8rem; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; border-radius: 8px; padding: 4px 12px; margin-bottom: 6px; }
.part-dir { background: #f3e8ff; border-color: #c39bd3; }
.part-dir h3 { color: #6c3483; }
.written-prompt-card { background: #fff8f3; border: 2px solid #f0a070; border-radius: 14px; padding: 22px; margin-bottom: 22px; }
.written-prompt-label { font-size: 0.8rem; font-weight: bold; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.written-prompt-type { font-size: 1rem; font-weight: bold; color: #555; margin-bottom: 10px; }
.written-prompt-text { font-size: 1.05rem; color: #2c3e50; line-height: 1.75; margin-bottom: 10px; background: #fff; border-radius: 8px; padding: 14px 16px; border: 1px solid #e8c4a0; }
.written-guidance { font-size: 0.9rem; color: #7f8c8d; font-style: italic; margin-bottom: 12px; }
.written-textarea { width: 100%; min-height: 130px; padding: 12px; font-size: 1rem; border: 2px solid #ddd; border-radius: 10px; font-family: inherit; box-sizing: border-box; resize: vertical; line-height: 1.6; }
.written-textarea:focus { outline: none; border-color: var(--primary); }
.word-count-row { font-size: 0.85rem; color: #999; text-align: right; margin-top: 5px; }

/* ── PICTURE UNDER THE QUESTION ── */
#q-visual:empty { display: none; }
#q-visual { margin: 4px 0 14px; }

/* ── HINT BOX with its own speaker (10/7) ── */
.hint-box {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: 600; color: #555; line-height: 1.5;
  background: #f0f0f0; border-radius: 8px; padding: 6px 10px; margin-top: 8px;
}
.hint-box .hint-speak-btn { font-size: 1rem; min-width: 36px; padding: 4px 8px; background: #fff; }
/* closed hint: a small optional button — the hint shows only if the student asks */
.hint-wrap { margin-top: 8px; }
.hint-reveal-btn {
  font: inherit; font-size: 0.88rem; font-weight: 700; color: #7a5a00;
  background: #fff8e1; border: 2px dashed #f0c14b; border-radius: 999px;
  padding: 5px 14px; cursor: pointer;
}
.hint-reveal-btn:hover, .hint-reveal-btn:focus-visible { background: #ffefc2; outline: none; border-style: solid; }

/* ── PART BANNER (10/8) — which part the student is on ── */
.part-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1.35rem; font-weight: 900; color: #fff; letter-spacing: .3px;
  border-radius: 14px; padding: 10px 14px; margin-bottom: 12px;
  box-shadow: 0 4px 0 rgba(0,0,0,.15);
}
.part-banner:empty { display: none; }
.part-banner.pb-practice-a { background: #1e8449; }
.part-banner.pb-practice-b { background: #117a65; }
.part-banner.pb-review     { background: #2471a3; }
.part-banner.pb-quiz       { background: #3b2491; }
.part-banner .pb-teacher   { font-size: .8rem; font-weight: 700; opacity: .9; }

/* ── DIRECTIONS: paper and pencil ── */
.paper-dir    { background: #f3efff; border-color: #c4b5f5; }
.paper-dir h3 { color: #4a2fa8; }

/* ══ MODULE 2 PICTURES (visuals.js) ══════════════════════════ */
.m2-vis {
  clear: both;
  background: #fffdf7;
  border: 2px solid #e6def7;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  color: #2c3e50;
}
.feedback-box .m2-vis { background: #ffffff; }
.m2-explain { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; justify-content: center; }
.m2-explain .m2-vis { flex: 1 1 250px; display: flex; align-items: center; justify-content: center; }

/* worked columns: one digit per cell so the places line up */
.m2-stack { border-collapse: collapse; margin: 0 auto; font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: 1.7rem; line-height: 1.15; }
.m2-stack td { width: 1.05em; padding: 0; text-align: center; position: relative; }
.m2-stack td.m2-op { width: 1.3em; text-align: left; color: var(--primary); }
.m2-stack td.m2-comma::after { content: ","; position: absolute; right: -0.16em; bottom: 0; }
.m2-stack .m2-marks td { font-size: 0.8em; line-height: 1.5; color: #c0392b; vertical-align: bottom; }
.m2-stack td.m2-struck { color: #999; text-decoration: line-through; text-decoration-color: #c0392b; text-decoration-thickness: 2px; }
.m2-stack .m2-bot td { border-bottom: 3px solid #2c3e50; padding-bottom: 2px; }
.m2-stack .m2-ans td { color: var(--correct-dk); padding-top: 3px; }

/* rectangle / square with labeled sides */
.m2-rect { display: block; width: 100%; height: auto; max-height: 210px; }
.m2-rect-shape { fill: #ece6fb; stroke: #3b2491; stroke-width: 4; }
.m2-rect-label { font: 800 24px "Comic Sans MS", "Comic Sans", Arial, sans-serif; fill: #2c3e50; text-anchor: middle; }
.m2-rect-side      { text-anchor: start; }
.m2-rect-side-left { text-anchor: end; }
.m2-rect-name { font: 700 19px "Comic Sans MS", "Comic Sans", Arial, sans-serif; fill: #3b2491; text-anchor: middle; }

/* bar model: parts on top, total on the bottom (same as the M1–M2 homework) */
.m2-bar { display: flex !important; align-items: stretch; gap: 10px; font-weight: 800; }
.m2-bar-labs { display: grid; grid-template-rows: 1fr 1fr; align-items: center; font-size: 0.8rem; color: #666; text-transform: uppercase; letter-spacing: .5px; }
.m2-bar-box { flex: 1; border: 3px solid #2c3e50; border-radius: 6px; overflow: hidden; min-width: 200px; }
.m2-bar-top { display: grid; border-bottom: 3px solid #2c3e50; }
.m2-bar-top div + div { border-left: 3px solid #2c3e50; }
.m2-bar-top div, .m2-bar-bot { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; padding: 2px 6px; }
.m2-bar-ans { background: #d4edda; color: var(--correct-dk); }
.m2-bar-bot { background: #ece6fb; }

/* lines of work for the estimates */
.m2-work { display: block !important; text-align: center; font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: 1.25rem; line-height: 1.7; }
.m2-work-last { border-top: 3px solid #2c3e50; margin-top: 4px; padding-top: 4px; color: var(--correct-dk); }

@media(max-width: 600px) {
  .m2-stack { font-size: 1.35rem; }
  .m2-work  { font-size: 1.05rem; }
}

/* ══ HELP FOR STUDENTS WHO ARE STUCK (10/10) ═════════════════ */
/* Step 1 — Practice (green, like the rounding sites' Practice A) */
.start-btn.practice-a-btn { background: #27ae60; box-shadow: 0 5px 0 #1e8449; }
.start-btn.practice-a-btn:hover { box-shadow: 0 8px 0 #1e8449; }
#practice-a-card .step-label { color: #1e8449; }
.practice-a-dir    { background: #eafaf1; border-color: #82e0aa; }
.practice-a-dir h3 { color: #1e8449; }
.words-dir    { background: #eef6ff; border-color: #9cc5f0; }
.words-dir h3 { color: #1f5f99; }

/* the mistake, named, inside the feedback */
.slip-note { display: block; overflow: hidden; margin: 6px 0; padding: 6px 10px; border-left: 5px solid #e67e22; background: #fff7ec; color: #6b3d00; font-weight: 700; border-radius: 6px; }

/* "try one like it" strip */
.twin-note { background: #fff4d6; border: 2px solid #f0b429; color: #6b4a00; border-radius: 12px; padding: 8px 14px; margin-bottom: 12px; text-align: center; font-size: 1.02rem; }
.mi-twin { margin-top: 6px; font-size: 0.88rem; font-weight: 700; }
.mi-twin.right { color: var(--correct-dk); }
.mi-twin.wrong { color: var(--danger); }

/* word help: a button per math word, and the card it opens */
#q-words:empty { display: none; }
#q-words { margin: 2px 0 12px; }
.word-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.word-label { font-size: 0.9rem; font-weight: 700; color: #555; }
.word-chip { font: inherit; font-size: 0.95rem; font-weight: 700; color: #1f5f99; background: #eef6ff; border: 2px solid #9cc5f0; border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.word-chip:hover, .word-chip:focus-visible { background: #dcecff; outline: none; border-color: #1f5f99; }
.word-chip.open { background: #1f5f99; color: #fff; border-color: #1f5f99; }
.word-card { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; background: #f5faff; border: 2px solid #9cc5f0; border-radius: 12px; padding: 10px 12px; color: #2c3e50; }
.word-card-text { flex: 1; font-size: 1rem; line-height: 1.6; }
.word-card-ex { margin-top: 4px; color: #444; }
.word-card .m2-vis { margin-top: 8px; max-width: 360px; }
.word-close { font: inherit; font-weight: 800; background: none; border: none; color: #777; cursor: pointer; padding: 2px 6px; }

/* pictures under a question: the "?" where the answer goes, the missing part of the bar model */
.m2-stack .m2-ask td { color: var(--primary); }
.m2-bar-ask { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #f1edfb 6px, #f1edfb 12px); color: var(--primary); font-size: 1.3rem !important; }
#q-visual .m2-vis { max-width: 520px; margin-left: auto; margin-right: auto; }

/* ── LISTEN, THEN NEXT (10/11): after a miss, one big Listen button; Next waits for it ── */
.listen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 4px; clear: both; }
.listen-btn { font: inherit; font-size: 1.15rem; font-weight: 800; color: #fff; background: #c0392b; border: none; border-radius: 14px; padding: 12px 26px; cursor: pointer; box-shadow: 0 4px 0 #922b21; }
.listen-btn:hover { transform: translateY(-1px); }
.listen-btn.playing { background: #7f8c8d; box-shadow: 0 4px 0 #566573; cursor: default; }
.listen-btn:disabled { background: #b0b7ba; box-shadow: 0 4px 0 #8a9194; cursor: not-allowed; }
.listen-btn.heard { font-size: 0.9rem; padding: 6px 14px; background: #fff; color: #2c3e50; border: 2px solid #c8d0d3; box-shadow: none; }
.listen-note { font-size: 0.95rem; font-weight: 700; color: #6b3d00; }
.listen-dir    { background: #fdecea; border-color: #f1a9a0; }
.listen-dir h3 { color: #922b21; }

/* Finish screen (Marcos 10/14): Sign Out is quieter than the main buttons, and each button says where it goes */
.signout-btn { background:none; border:2px solid #ccc; border-radius:10px; color:#666; font-family:inherit;
               font-size:0.95rem; font-weight:700; padding:8px 16px; cursor:pointer; }
.signout-btn:hover { border-color:#999; color:#333; }
.signout-sub { display:block; font-size:0.8rem; font-weight:600; color:#888; margin-top:2px; }

/* ══ WARM-UP (Marcos 10/15) ══════════════════════════════════
   The worked example ("watch") sits in a calm blue box with the Listen button;
   in a step-by-step problem the place being worked is shaded, and its answer is the "?". */
.part-banner.pb-warm-up { background: #d35400; }
.feedback-box.teach-box { display: block; background: #eef5ff; border-color: #7fb0ec; color: #1d3557; }
.watch-tag { display: inline-block; background: #d35400; color: #fff; font-size: .8em; font-weight: 800; border-radius: 8px; padding: 2px 10px; margin-right: 6px; vertical-align: middle; }
.m2-stack td.m2-now { background: #fff1c2; border-radius: 4px; }
.m2-stack .m2-step td { color: var(--correct-dk); }
.m2-stack .m2-step td.m2-now { color: var(--primary); }
.start-btn.warm-up-btn { background: #e67e22; box-shadow: 0 5px 0 #a04000; }
.start-btn.warm-up-btn:hover { box-shadow: 0 8px 0 #a04000; }
.warm-up-dir    { background: #fff4e8; border-color: #f5c08a; }
.warm-up-dir h3 { color: #a04000; }
.teach-box .watch-line { margin: 0 0 8px; }
.teach-box .watch-sum { font-weight: 700; }


/* ═══ THE LAB ═══════════════════════════════════════ */
/* my plan */
.plan-hi-row { background: #e8f6f3; border-color: #7fcdbb; }
.plan-hi-row h3 { color: var(--primary-dark); }
.strand-card .step-label { color: var(--primary-dark); }
.lesson-grid { display: flex; flex-direction: column; gap: 12px; }
.lesson-btn { flex: none; width: 100%; text-align: left; align-items: flex-start; }
.lesson-btn.next-up:not(.locked) { outline: 4px solid #f4c430; outline-offset: 3px; }
.rules-box { background: #f0f4ff; border: 2px solid #a9c4f5; border-radius: 12px; padding: 12px 16px; margin: 12px 0; font-size: 0.85rem; color: #2c3e50; line-height: 1.6; }
.score-link { text-align: center; margin: 6px 0 0; }
.link-btn { background: none; border: none; color: var(--primary-dark); font-family: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; padding: 6px; }
.end-btns { display: flex; flex-direction: column; gap: 12px; }
.start-btn.next-btn-end { background: #1e8449; box-shadow: 0 5px 0 #145a32; }
.start-btn.redo-btn { background: #d35400; box-shadow: 0 5px 0 #a04000; }
.start-btn.back-btn { background: #566573; box-shadow: 0 5px 0 #34495e; }
.mi-why { margin-top: 5px; font-size: 0.85rem; color: #444; }

/* the lesson banner */
.part-banner.pb-lab { background: #e8f6f3; color: var(--primary-dark); border-color: #7fcdbb; }

/* ⭐ one of the student's own missed facts */
.mine-note { background: #fff6d6; border: 3px solid #f4c430; color: #7a5a00; border-radius: 12px; padding: 8px 14px; margin: 0 0 10px; font-size: var(--fs); }

/* Listen to the question first */
.q-listen-row { margin: 6px 0 12px; }
.answer-btn.locked-choice { opacity: 0.45; cursor: not-allowed; }

/* ── pictures (visuals.js) ── */
.lv { margin: 10px auto; text-align: center; }
.lv-explain { margin-top: 10px; }
.lv-line { width: 100%; max-width: 700px; height: auto; }
.lv-axis { stroke: #34495e; stroke-width: 3; }
.lv-tick { stroke: #34495e; stroke-width: 2; }
.lv-num { font: bold 17px "Comic Sans MS", "Comic Sans", cursive, sans-serif; fill: #2c3e50; text-anchor: middle; }
.lv-num.lv-start { fill: #c0392b; font-size: 20px; }
.lv-num.lv-end { fill: #1e8449; font-size: 22px; }
.lv-tag { font: bold 16px "Comic Sans MS", cursive, sans-serif; fill: #c0392b; text-anchor: middle; }
.lv-dot-start { fill: #e74c3c; }
.lv-dot-end { fill: #27ae60; }
.lv-hop { fill: none; stroke: #2e86c1; stroke-width: 3; }
.lv-hop-n { font: bold 16px "Comic Sans MS", cursive, sans-serif; fill: #1f618d; text-anchor: middle; }
.lv-frames { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; }
.lv-frame { display: grid; grid-template-columns: repeat(5, 46px); grid-template-rows: repeat(2, 46px); border: 3px solid #34495e; background: #fff; }
.lv-box { border: 1px solid #95a5a6; display: flex; align-items: center; justify-content: center; }
.lv-d { width: 30px; height: 30px; border-radius: 50%; display: block; }
.lv-red { background: #e74c3c; }
.lv-blue { background: #2e86c1; }
.lv-green { background: #27ae60; }
.lv-moved { box-shadow: 0 0 0 4px #f4c430; }
.lv-cap { flex-basis: 100%; font-size: 1.2rem; font-weight: bold; color: #1e8449; }
.lv-teen-row { display: flex; gap: 16px; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.lv-ten { display: grid; grid-template-rows: repeat(10, 20px); border: 2px solid #1f618d; }
.lv-ten i { width: 26px; border-bottom: 1px solid #1f618d; background: #85c1e9; display: block; }
.lv-ones { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; max-width: 330px; }
.lv-one { width: 24px; height: 24px; background: #f5b041; border: 2px solid #b9770e; display: block; }
.lv-one.lv-more { background: #58d68d; border-color: #1e8449; }
.lv-gone { opacity: 0.35; background-image: linear-gradient(45deg, transparent 45%, #c0392b 45%, #c0392b 55%, transparent 55%); }
.lv-plus { font-size: 1.4rem; font-weight: bold; align-self: center; }
.lv-bond svg { width: 260px; max-width: 100%; height: auto; }
.lv-bond-l { stroke: #34495e; stroke-width: 3; }
.lv-bond-c { fill: #fff; stroke: #0e7c6b; stroke-width: 4; }
.lv-bond-c.lv-whole { fill: #e8f6f3; }
.lv-bond-c.lv-ask { stroke: #c0392b; stroke-dasharray: 6 4; }
.lv-bond-t { font: bold 28px "Comic Sans MS", cursive, sans-serif; fill: #2c3e50; text-anchor: middle; }
@media (max-width: 600px) {
  .lv-frame { grid-template-columns: repeat(5, 36px); grid-template-rows: repeat(2, 36px); }
  .lv-d { width: 24px; height: 24px; }
}

/* not on the list yet: Under Construction (Marcos 10/18) */
.uc-box { background: #fff6d6; border-color: #f4c430; text-align: center; }
.uc-box h3 { color: #7a5a00; }
.uc-box .dir-row { justify-content: center; }
.uc-box .start-btn { margin: 14px auto 0; max-width: 360px; }
.uc-box .signout-btn { margin-top: 14px; }

/* 📖 QPS: read-only progress card at the end of the plan (qps-feed.js) */
.qps-card { background: #eef6fc; border-color: #9cc9ea; }
.qps-card h3 { margin: 0; color: #1f618d; }
.qps-card .qps-line { margin: 8px 0 0; font-weight: 700; color: #1f618d; }

/* Strand 2 pictures: equal groups, arrays, times-as-many bars */
.lv-groups-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.lv-group { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: center; width: 96px; min-height: 96px; padding: 10px; border: 3px solid #34495e; border-radius: 50%; background: #fff; }
.lv-group .lv-d { width: 22px; height: 22px; }
.lv-array-box { display: inline-flex; flex-direction: column; gap: 8px; padding: 12px; border: 3px solid #34495e; border-radius: 10px; background: #fff; }
.lv-arow { display: flex; gap: 8px; }
.lv-arow .lv-d { width: 24px; height: 24px; }
.lv-bars { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 640px; margin: 10px auto; }
.lv-bars-row { display: flex; align-items: center; gap: 0; }
.lv-bar-name { width: 90px; font-weight: bold; font-size: 1rem; color: #2c3e50; }
.lv-bar-cell { width: 70px; height: 40px; border: 2px solid #1f618d; background: #d6eaf8; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; }
.lv-bar-total { margin-left: 12px; font-weight: bold; font-size: 1.2rem; color: #1e8449; }

/* Strands 3 and 4 pictures: place chart, expanded-form cards, times 10, rounding line */
.lv-place-table { border-collapse: collapse; margin: 0 auto; }
.lv-place-table th, .lv-place-table td { border: 2px solid #34495e; padding: 6px 14px; text-align: center; font-size: 1.3rem; font-weight: bold; min-width: 56px; }
.lv-place-table th { font-size: 0.85rem; background: #f4f6f7; }
.lv-place-table .lv-mark { background: #fff3c4; }
.lv-place-table td.lv-zero { color: #1e8449; background: #e9f7ef; }
.lv-place-table td.lv-shift-lab { border: none; font-size: 1.1rem; color: #1f618d; text-align: left; }
.lv-parts { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.lv-part { border: 2px solid #1f618d; background: #d6eaf8; border-radius: 8px; padding: 8px 16px; font-size: 1.3rem; font-weight: bold; }
.lv-num.lv-bench { fill: #1f618d; font-size: 20px; }
.lv-num.lv-half, .lv-tag.lv-half { fill: #b9770e; }
.lv-round-arrow { stroke: #27ae60; stroke-width: 4; }

/* ═══════════════════════════════════════════════════════
   🔎 READING FOR MEANING — the passage beside the question (reading-ui.js)
   Copied from the Read Literary review's story panel and item styles, at the Lab's kid
   text size (1rem = 20px here; nothing a student reads under 16px).
═══════════════════════════════════════════════════════ */
.story-panel { display: none; }
.quiz-body { display: block; }
body.story-active .quiz-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
body.story-active .story-panel { display: block; }
body.story-active .container { max-width: 1240px; }
.story-panel { position: sticky; top: 14px; }
.story-panel-header {
  background: var(--primary); color: #fff; font-size: 0.95rem; font-weight: bold;
  padding: 8px 12px; border-radius: 12px 12px 0 0;
}
.story-scroll {
  background: #f0fdfa; border: 2px solid #b7ece4; border-top: none;
  border-radius: 0 0 12px 12px; padding: 14px 16px;
  max-height: calc(100vh - 150px); overflow-y: auto;
}
.story-para {
  display: flex; gap: 10px; margin: 0 0 12px;
  line-height: 1.8; font-size: 1rem; color: #2f2a3a;
  border-radius: 10px; padding: 4px;
}
.story-para:last-child { margin-bottom: 0; }
.story-para.para-focus { background: #fff8d6; box-shadow: 0 0 0 3px #f4c430; }
.para-speak-btn { font-size: 0.9rem; min-width: 38px; padding: 3px 6px; align-self: flex-start; background: #fff; }
/* a paragraph heard to its end while the passage is heard first (Marcos 10/26: each 🔊 on the left counts too) */
.para-speak-btn.heard { position: relative; border-color: #27ae60; background: #eafaf1; }
.para-speak-btn.heard::after {
  content: '✓'; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
  background: #27ae60; color: #fff; font-size: 12px; line-height: 18px; text-align: center; font-weight: bold;
}
.para-num {
  flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 0.85rem; font-weight: bold; display: flex; align-items: center; justify-content: center;
  margin-top: 2px; flex-shrink: 0;
}
.para-text { flex: 1; min-width: 0; }
.st-sent.lit { background: #ffe9a8; box-shadow: 0 2px 0 #f4c430; border-radius: 4px; }

@media (max-width: 900px) {
  body.story-active .quiz-body { grid-template-columns: 1fr; }
  .story-panel { position: static; margin-bottom: 16px; }
  .story-scroll { max-height: 46vh; }
}

/* the passage the first time it shows */
.feedback-box.story-gate { display: block; }
.story-go-btn { display: block; margin: 14px 0 0; }

/* Part A + Part B */
.options-grid.ebsr-item { gap: 18px; }
.ebsr-part { border: 3px solid #c3efe8; border-radius: 16px; padding: 14px 16px 16px; background: #fdfdfb; }
.ebsr-label {
  display: inline-block; font-size: 0.85rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px;
  color: white; border-radius: 6px; padding: 3px 12px; margin-bottom: 10px;
}
.ebsr-label.part-A { background: #0f766e; }
.ebsr-label.part-B { background: #0e7490; }
.ebsr-q-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ebsr-q { flex: 1; font-size: var(--fs); line-height: 1.7; color: #2c3e50; font-weight: bold; }
.ebsr-choices { display: grid; gap: 10px; }

/* choose two (check boxes) */
.ms-box {
  display: inline-block; width: 22px; height: 22px; border: 3px solid #94a3b8; border-radius: 5px;
  background: #fff; vertical-align: -4px; margin-right: 8px; position: relative;
}
button.answer-btn.multi-choice.selected .ms-box { border-color: #f57f17; background: #f9a825; }
button.answer-btn.multi-choice.selected .ms-box::after,
button.answer-btn.multi-choice.correct .ms-box::after { content: "✓"; position: absolute; left: 2px; top: -6px; font-size: 18px; font-weight: bold; color: #fff; }
button.answer-btn.multi-choice.correct .ms-box { border-color: #28a745; background: #28a745; }
button.answer-btn.multi-choice.incorrect .ms-box { border-color: #dc3545; background: #dc3545; }
/* RC6: text to read above the question (a summary, like the test) — read aloud with the question */
.rc-excerpt { background: #fffbea; border: 2px solid #ecd98a; border-radius: 12px; padding: 10px 16px; margin: 0 0 12px; text-align: left; }
.rc-excerpt-label { font-weight: 700; color: #7a5a00; margin-bottom: 4px; }
.rc-excerpt p { margin: 4px 0; line-height: 1.5; }
.multi-count {
  justify-self: end; font-size: 0.85rem; font-weight: bold; color: #475569; background: #f1f5f9;
  border-radius: 999px; padding: 3px 12px; margin-top: 2px;
}
.multi-count.done { color: #0f766e; background: #ccfbf1; }

/* click the sentence(s) */
.ht-hint { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: #334155; background: #f0fdfa; border: 2px dashed #5eead4; border-radius: 10px; padding: 6px 12px; }
.ht-sent { cursor: pointer; border-radius: 6px; transition: background 0.15s, box-shadow 0.15s; -webkit-tap-highlight-color: transparent; }
.ht-sent:focus-visible { outline: 3px solid #0d9488; outline-offset: 2px; }
.ht-sent.locked-choice { cursor: not-allowed; }
.ht-para-row { display: flex; gap: 10px; align-items: flex-start; }
.ht-para {
  flex: 1; min-width: 0; margin: 0; font-size: 1rem; line-height: 2.1; color: #2f2a3a;
  background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px 16px;
}
.ht-para .ht-sent { padding: 2px 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ht-para .ht-sent:not(.locked-choice):hover { background: #e6fffa; box-shadow: 0 2px 0 #5eead4; }
.ht-para .ht-sent.selected  { background: #fff59d; box-shadow: 0 2px 0 #f9a825; }
.ht-para .ht-sent.correct   { background: #d4edda; box-shadow: 0 2px 0 #28a745; }
.ht-para .ht-sent.incorrect { background: #f8d7da; box-shadow: 0 2px 0 #dc3545; text-decoration: line-through; text-decoration-color: #dc3545; }
.ht-list { display: grid; gap: 12px; }
.ht-list-sent {
  flex: 1; display: block; background: #fff; border: 3px solid #e0e0e0; border-left: 6px solid #cbd5e1;
  border-radius: 12px; padding: 11px 14px; font-size: 1rem; line-height: 1.6; color: #2f2a3a; box-shadow: 0 4px 0 #e0e0e0;
}
.ht-list-sent:not(.locked-choice):hover { background: #f0fdfa; border-color: var(--primary); }
.ht-list-sent.locked-choice { background: var(--locked-bg); }
.ht-list-sent.selected  { background: #fff9c4; border-color: #f9a825; border-left-color: #f57f17; box-shadow: 0 4px 0 #f57f17; }
.ht-list-sent.correct   { background: #d4edda; border-color: #28a745; box-shadow: 0 4px 0 #28a745; }
.ht-list-sent.incorrect { background: #f8d7da; border-color: #dc3545; box-shadow: 0 4px 0 #dc3545; }

/* feedback: one part right, one wrong */
.feedback-box.partial { display: block; background: #fff8e1; border-color: #f4c430; color: #5d4500; }
.rc-fb-part { margin: 8px 0 0; }
.rc-warn { background: #fff3cd; border: 2px solid #ffc107; color: #7a5a00; border-radius: 10px; padding: 8px 14px; font-size: 0.9rem; font-weight: bold; }

/* A passage needs the screen (1366 x 650 Chromebook): while one shows, the page title goes, the lesson
   banner, badges and clock get small, and the container loses its top margin. The lesson name stays on
   screen in the small banner, so Mr. O can still see it from across the room. */
body.story-active .container { margin-top: 0.5rem; padding-top: 1rem; }
body.story-active .container > h1,
body.story-active .container > .welcome-sub { display: none; }
body.story-active .part-banner { font-size: 0.95rem; padding: 4px 12px; margin-bottom: 6px; }
body.story-active .q-badge { margin-bottom: 4px; }
body.story-active .timer-row { margin: 0 0 6px; }
body.story-active .timer-display { font-size: 0.9rem; padding: 2px 10px; }
body.story-active .story-scroll { max-height: calc(100vh - 170px); }
body.story-active .streak-bar:empty { display: none; }
body.story-active .timer-row { margin: 0 0 4px; }
body.story-active .progress-bar { margin-bottom: 6px; }
.gate-lines { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.gate-lines .choice-speak-btn { flex: 0 0 auto; }

/* What each lesson helps with (Marcos 10/20: "I want them to know what they need help in") */
.part-banner { flex-wrap: wrap; }
.part-banner .pb-goal { flex-basis: 100%; text-align: center; font-size: 0.85rem; font-weight: 700; opacity: 0.95; }
body.story-active .part-banner .pb-goal { font-size: 0.8rem; }
.lesson-goal { display: block; font-size: 0.85rem; font-weight: 700; margin: 2px 0 2px; }
.practice-box { margin: 12px 0; }

/* ▶ Continue — the next lesson on the route, at the top of the plan (Marcos 10/20: full flow) */
.continue-btn { display: block; width: 100%; margin: 6px 0 14px; font-size: 1.15rem; background: #1f5fa8; box-shadow: 0 5px 0 #154377; }
.continue-btn .form-btn-sub { font-size: 0.85rem; }

/* ═══ MY PATH (Marcos 10/23: "what they have accomplished, what they are working on now, where they are headed") ═══
   1rem = 20px here: nothing a student reads is under 0.8rem (16px). */
.path-part { background: #f7fbfa; border-color: #cfe9e3; }
.path-part.now { background: #fffbea; border-color: #f4c430; box-shadow: 0 0 0 3px rgba(244, 196, 48, .2); }
.path-part h3 { color: var(--primary-dark); }
.timeline { list-style: none; margin: 6px 0 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 4px; background: #d9e3e0; border-radius: 2px; }
.tl-row { position: relative; margin: 0 0 6px; }
.tl-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 10px 6px 0; background: none; border: 2px solid transparent; border-radius: 14px; font-family: inherit; font-size: 1rem; text-align: left; cursor: pointer; color: var(--text); }
.tl-btn:hover { background: rgba(14, 124, 107, .06); }
.tl-dot { position: relative; z-index: 1; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #cfd6dd; background: #fff; display: flex; align-items: center; justify-content: center; }
.tl-dot::before { content: attr(data-mark); font-size: 1rem; font-weight: bold; color: #7b8a8b; }
.tl-subj { flex: none; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: bold; color: #fff; }
.tl-subj.ma { background: #0e7c6b; }
.tl-subj.rd { background: #7d3c98; }
.tl-sep, .tl-stop { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-title { font-size: 1.05rem; font-weight: bold; line-height: 1.25; }
.tl-row.done .tl-dot { border-color: #27ae60; background: #27ae60; }
.tl-row.done .tl-dot::before { color: #fff; font-size: 1.1rem; }
.tl-row.done .tl-title { color: #1e8449; }
.tl-row.later .tl-title { color: #6c7a7d; font-weight: normal; }
.tl-row.later .tl-subj { opacity: .65; }
.tl-row.now .tl-btn { background: #fff3c4; border-color: #f4c430; box-shadow: 0 0 0 4px rgba(244, 196, 48, .25); }
.tl-row.now .tl-dot { width: 52px; height: 52px; margin-left: -3px; border-color: #f4c430; background: #fff8dc; animation: stop-glow 1.6s ease-in-out infinite; }
.tl-row.now .tl-dot::before { font-size: 1.4rem; }
.tl-row.now .tl-title { font-size: 1.2rem; color: #5a3d00; }
.tl-here { margin-left: auto; flex: none; font-size: 0.8rem; font-weight: bold; color: #7a5200; background: #fff; border: 2px solid #f4c430; border-radius: 999px; padding: 2px 10px; }
@keyframes stop-glow { 50% { box-shadow: 0 0 0 9px rgba(244, 196, 48, .2); } }
@media (prefers-reduced-motion: reduce) { .tl-row.now .tl-dot { animation: none; } }
.all-lessons { margin: 0 0 14px; }
.all-lessons > summary { cursor: pointer; font-size: 1rem; font-weight: bold; color: var(--primary-dark); padding: 12px 16px; border: 2px solid #cfe9e3; border-radius: 14px; background: #f7fbfa; list-style: none; }
.all-lessons > summary::-webkit-details-marker { display: none; }
.all-lessons[open] > summary { margin-bottom: 12px; }
.rules-box > summary { cursor: pointer; font-size: 0.95rem; color: #2c3e50; }
.rules-box[open] > summary { margin-bottom: 6px; }

/* ▶ Start my next lesson (10/23): what it does, then the lesson — the same subject tag and title as the 📍 row —
   and it pulses and glows gold like the 📍 row (Marcos: "it should pulse and glow"). The button itself stays still
   (a moving target is hard to tap); the glow breathes and a gold ring pulses out around it. */
.continue-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 14px; padding-bottom: 14px; }
.continue-btn .go-top { font-size: 1rem; font-weight: bold; opacity: .95; }
.continue-btn .go-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.continue-btn .go-name .tl-subj { border: 2px solid #fff; }
.continue-btn .go-name .tl-title { font-size: 1.35rem; font-weight: bold; line-height: 1.25; color: #fff; }
.continue-btn.pulse { animation: go-pulse 1.6s ease-in-out infinite; }
.continue-btn.pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 16px; border: 4px solid rgba(244, 196, 48, .95); pointer-events: none; animation: go-ring 1.6s ease-out infinite; }
@keyframes go-pulse {
  0%, 100% { box-shadow: 0 5px 0 #154377, 0 0 6px 2px rgba(244, 196, 48, .55); }
  50% { box-shadow: 0 5px 0 #154377, 0 0 28px 12px rgba(244, 196, 48, .7); }
}
@keyframes go-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.08, 1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .continue-btn.pulse { animation: none; box-shadow: 0 5px 0 #154377, 0 0 18px 6px rgba(244, 196, 48, .6); }
  .continue-btn.pulse::after { animation: none; opacity: .8; transform: none; }
}

/* the one short list (10/24): "✓ N more done" above, "+ N more lessons, then 🏁" below */
.tl-more { position: relative; z-index: 1; margin: 4px 0 8px 58px; font-size: 0.95rem; font-weight: bold; }
.tl-more.done-more { color: #1e8449; }
.tl-more.done-more::before { content: '✓ '; }
.tl-more.finish { color: var(--primary-dark); background: #eafaf1; border: 2px dashed #27ae60; border-radius: 12px; padding: 8px 12px; margin-left: 0; }
.path-later { margin: 10px 0 0 !important; font-size: 0.95rem !important; color: #34495e !important; }

/* 📅 the tally (10/24): lessons passed this week and this year, in place of the 🚀 → 🏁 bar */
.tally { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.tally-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 0.95rem; border: 2px solid; background: #fff; }
.tally-chip b { font-size: 1.05rem; }
.tally-chip.week { border-color: #f4c430; color: #7a5200; }
.tally-chip.week::before { content: '⭐'; }
.tally-chip.year { border-color: #27ae60; color: #1e8449; }
.tally-chip.year::before { content: '🏆'; }
.plan-hi-row .hi-next { margin: 0; font-size: 0.93rem; line-height: 1.65; color: #444; }

/* ═══════════════════════════════════════════════════════
   TEACHER SCREEN (Marcos 10/30, "plan the LAB version"): one screen instead of pop-ups — a strand, a lesson,
   a version, then 👀 Try it as a student. The same look as Parts of Speech HQ's Teacher screen.
═══════════════════════════════════════════════════════ */
.t-bar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; background: #fff3cd; border: 2px solid #ffc107;
         border-radius: 12px; padding: 8px 14px; margin-bottom: 14px; color: #856404; font-weight: 700; }
.t-title { flex: 1 1 auto; font-size: 1.1rem; }
.t-note { font-weight: 400; font-size: 0.9rem; }
.t-exit { background: none; border: 1px solid #ffc107; border-radius: 8px; padding: 5px 12px; font: inherit; font-weight: 700;
          color: #856404; cursor: pointer; }
.t-h { font-size: 1rem; color: var(--primary); margin: 14px 0 6px; }
.t-h-note { font-weight: 400; font-size: 0.85rem; color: #666; }
.t-row { display: flex; flex-wrap: wrap; gap: 8px; }
.t-pick { font: inherit; font-size: 0.98rem; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer;
          background: #fff; color: var(--primary); border: 2px solid #c5d3ea; }
.t-pick:hover { border-color: var(--primary); }
.t-pick.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.t-picked { margin: 16px 0 8px; font-weight: 700; color: #333; }
.t-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.t-act { font: inherit; font-size: 1.08rem; font-weight: 700; text-align: left; padding: 14px 16px; border-radius: 14px; cursor: pointer;
         background: #fff; color: var(--primary); border: 3px solid var(--primary); box-shadow: 0 4px 0 #c5d3ea; }
.t-act:hover { background: #eef3ff; }
.t-act span { display: block; margin-top: 6px; font-size: 0.85rem; font-weight: 400; color: #444; line-height: 1.4; }

/* 👀 Try it as a student: the one-tap start, and the teacher's bar along the bottom */
.teach-ready { text-align: center; padding: 20px 10px; }
.teach-ready-h { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin: 0 0 6px; }
.teach-ready-what { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.teach-ready-note { color: #555; margin: 0 0 16px; }
.teach-ready .start-btn { display: inline-block; width: auto; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.teach-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
             flex-wrap: wrap; gap: 6px 12px; padding: 7px 12px; background: #fff3cd; border-top: 2px solid #ffc107;
             color: #856404; font: 700 0.9rem/1.3 system-ui, sans-serif; }
.teach-bar button { font: inherit; padding: 5px 12px; border-radius: 8px; border: 1px solid #d4a106; background: #fff; color: #856404; cursor: pointer; }
body.teach-on { padding-bottom: 64px; }
#teach-bar:not(.started) .teach-go { display: none; }   /* the menu and arrows come with the run (▶ Start) */
.teach-go { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
#teach-jump { font: inherit; font-weight: 400; max-width: 260px; min-width: 0; padding: 4px 6px; border-radius: 8px; border: 1px solid #d4a106; background: #fff; color: #5c4703; }
.teach-bar button:disabled { opacity: 0.4; cursor: default; }

/* ✅ Answer key (Teacher screen, step 2, 10/30): one block per question, the right answer in green; reading: the passage
   once, then its questions; a small trap tag under each wrong choice */
.key-sec { font-size: 1.15rem; color: var(--primary); margin: 18px 0 8px; }
.key-story { border: 2px solid #cfe8e3; border-radius: 12px; padding: 10px 14px; margin: 14px 0 10px; background: #f6fbfa; break-inside: avoid; }
.key-story-title { font-weight: 700; margin: 0 0 6px; }
.key-para { margin: 4px 0; line-height: 1.5; }
.key-para-n { display: inline-block; min-width: 1.6em; font-weight: 700; color: var(--primary); }
.key-q { border: 1px solid #e3e8f0; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; break-inside: avoid; }
.key-where { font-size: 0.85rem; color: #666; margin: 0 0 4px; }
.key-ask { font-weight: 700; margin: 4px 0 8px; }
.key-pic { margin: 6px 0; }
.key-note { color: #555; font-size: 0.9rem; margin: 0 0 8px; }
.key-choices { margin: 8px 0; padding-left: 22px; list-style: disc; }
.key-choices li { margin: 4px 0; }
.key-choices li.key-right { color: #1e7e46; font-weight: 700; }
.key-trap { display: block; font-size: 0.82rem; color: #8a5a00; font-weight: 400; margin-top: 1px; }
.key-trap b { font-weight: 700; }
.key-part { margin-top: 8px; }
.key-why { margin-top: 8px; padding: 8px 12px; background: #f1f8f4; border-radius: 10px; }

@media print {
  body.key-printing { background: #fff; padding: 0; }
  body.key-printing .container > :not(#key-screen),
  body.key-printing #key-screen .t-bar,
  body.key-printing .share-banner,
  body.key-printing #teach-bar,
  body.key-printing canvas { display: none !important; }
  body.key-printing .container { box-shadow: none; padding: 0; margin: 0; max-width: none; }
}

/* 🖥️ Slide Mode (Teacher screen, step 3, 10/30): the worked examples and the steps, big, for the desk or the board —
   never the questions a child is scored on. The look of Parts of Speech HQ's slides; reading has the passage beside it. */
body.slides-active .container { max-width: 1240px; margin: 0.6rem auto; padding: 1rem 1.6rem 0.4rem; }
body.slides-active .container > h1, body.slides-active .container > .welcome-sub { display: none; }   /* the slide gets the room */
.sl-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: #fff3cd; border: 2px solid #ffc107;
          border-radius: 12px; padding: 8px 14px; margin-bottom: 14px; color: #856404; font-weight: 700; }
.sl-title { flex: 1 1 auto; font-size: 1.05rem; }
.sl-count { font-size: 1rem; white-space: nowrap; }
.sl-go { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
#sl-jump { font-family: inherit; font-size: 0.95rem; padding: 5px 8px; border-radius: 8px; border: 1px solid #d4b106;
           background: #fff; color: #5c4703; max-width: 230px; min-width: 0; }
.sl-step { background: #fff; border: 1px solid #d4b106; border-radius: 8px; padding: 4px 10px; font: inherit; font-weight: 700; color: #5c4703; cursor: pointer; }
.sl-step:disabled { opacity: 0.4; cursor: default; }
.sl-exit { background: none; border: 1px solid #ffc107; border-radius: 8px; padding: 5px 12px; font: inherit; font-weight: 700;
           color: #856404; cursor: pointer; }
.sl-where { display: inline-block; background: #e8f5f2; color: var(--primary); font-weight: 700; font-size: 0.95rem;
            border-radius: 999px; padding: 3px 14px; margin: 0 0 6px; }
.sl-h { font-size: 1.6rem; color: var(--primary); margin: 4px 0 10px; }
.sl-line { font-size: 1.35rem; line-height: 1.55; margin: 6px 0; color: #1a2a44; }
.sl-ask { font-size: 1.4rem; font-weight: 700; line-height: 1.5; color: #1a2a44; margin: 10px 0 6px; }
.sl-pic { margin: 10px 0; }
.sl-choices { display: grid; gap: 10px; margin: 8px 0 4px; }
.sl-choice { background: #fff; border: 3px solid #c5dcd6; border-radius: 14px; padding: 10px 16px; font-size: 1.25rem; line-height: 1.45; color: #1a2a44; }
.sl-choice.sl-right { border-color: #1e7e46; background: #e4f4ea; font-weight: 700; box-shadow: 0 0 0 3px #1e7e46; }
.sl-answer { margin-top: 12px; background: #f4fbf6; border: 2px solid #1e7e46; border-radius: 14px; padding: 8px 14px; font-size: 1.15rem; line-height: 1.5;
             scroll-margin-bottom: 96px; }   /* clear of the Back / Next bar */
.sl-with-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.sl-story { background: #f6fbfa; border: 2px solid #cfe8e3; border-radius: 14px; padding: 12px 16px; max-height: 72vh; overflow-y: auto; }
.sl-story-title { font-weight: 700; font-size: 1.15rem; margin: 0 0 8px; }
.sl-para { font-size: 1.2rem; line-height: 1.6; margin: 6px 0; }
.sl-para-n { display: inline-block; min-width: 1.6em; font-weight: 700; color: var(--primary); }
mark.sl-lit { background: #fff1a8; padding: 0 2px; border-radius: 4px; }
mark.sl-ans { background: #c9efd6; padding: 0 2px; border-radius: 4px; font-weight: 700; }
.sl-nav { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 12px 0 4px;
          background: linear-gradient(rgba(255,255,255,0), #fff 30%); margin-top: 10px; }
.sl-nav .action-btn { min-width: 150px; font-size: 1.15rem; }
.sl-nav .action-btn:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 760px) { .sl-with-story { grid-template-columns: 1fr; } }