/* ═══════════════════════════════════════════════════════
   INFERENCE PRACTICE · style.css
   Engine look: R.A.D. Practice (QPS Literacy Hub fonts, big kid text).
   Passage panel and colors: the SBAC Read Literary IAB review (teal header,
   mint passage, numbered paragraphs) — Marcos 10/20: "mirror the IAB styling".
   Site additions are in the INFERENCE PRACTICE block at the end.
═══════════════════════════════════════════════════════ */
:root {
  --primary:      #1a3a6b;   /* deep navy */
  --primary-dark: #0f2346;
  --secondary:    #c0392b;   /* civic red */
  --secondary-dk: #922b21;
  --teal:         #1abc9c;
  --teal-dark:    #148f77;
  --card-bg:      #ffffff;
  --text:         #1b1b1b;
  --locked-bg:    #e9ecef;
  --correct:      #27ae60;
  --correct-dk:   #1e8449;
  --danger:       #c0392b;
  --danger-dk:    #922b21;
  --fs:           1.05rem;
}

* { box-sizing: border-box; }

body {
  font-family: "Verdana", Geneva, sans-serif;
  background: linear-gradient(135deg, #1a3a6b 0%, #c0392b 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;
}

/* ── COVER FLEX ───────────────────────────────────── */
.cover-flex {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cover-img-wrap { flex: 0 0 180px; }
.cover-img-wrap img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
  border: 4px solid var(--secondary);
}
.welcome-hero-text {
  flex: 1 1 260px;
  font-size: var(--fs);
  color: #444;
  line-height: 1.8;
}

/* ── 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:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 0 var(--primary-dark); }
.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; }

.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.65em; font-weight: normal; opacity: 0.88; }

.score-btn {
  background: var(--secondary);
  color: white;
  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.7rem;
  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; }
.instruct-dir { background: #f3e8ff; border-color: #c39bd3; }
.instruct-dir h3 { color: #6c3483; }
.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; }
.story-dir   { background: #fff1e6; border-color: #f5a66b; }
.story-dir h3 { color: #b4510f; }

.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; }
.chip-purple { background: #f3e8ff; border: 2px solid #9b59b6; color: #6c3483; }

/* ── 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: white;
  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;
}

/* Reading lock bar (12s — 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 (6s — 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: 1.9;
  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); }

.choice-text .wrd.hl { background: #ffe082; border-radius: 3px; padding: 0 2px; }
.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;
  word-break: normal;
  overflow-wrap: break-word;
  min-height: 54px;
  line-height: 1.55;
}
button.answer-btn:hover:not(:disabled) {
  background: #f0f4ff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #b0bfdd;
}
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; }

.two-answer-badge {
  display: inline-block;
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}

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

/* ── TWO-SIDED COMPREHENSION LAYOUT ────────────────────
   Story pinned on the left, question on the right.
   Active only when #quiz-screen has .comp-mode (set by JS
   for the Comprehension section). Everything else stays
   single-column and unaffected.                          */
.story-panel { display: none; }            /* hidden unless comp-mode */
.quiz-body   { display: block; }           /* single column by default */

#quiz-screen.comp-mode .quiz-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
#quiz-screen.comp-mode .story-panel { display: block; }

/* widen the card so two columns have room (comp only) */
body.comp-active .container { max-width: 1160px; }

.story-panel { position: sticky; top: 14px; }
.story-panel-header {
  background: var(--primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: bold;
  padding: 9px 14px;
  border-radius: 12px 12px 0 0;
  text-align: center;
  letter-spacing: 0.3px;
}
.story-scroll {
  background: #f0f4ff;
  border: 2px solid #c7d7fb;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 10px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  position: relative;        /* page offsets measure from here (scroll-to-page) */
  scroll-behavior: smooth;
}
.story-page-img {
  width: 100%;
  display: block;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  border: 1px solid #d6e0f5;
}

/* One figure per story page: a page label, then the picture.
   The page the question names gets the orange ring (.story-focus). */
.story-page { margin: 0 0 12px; }
.story-page:last-child { margin-bottom: 0; }
.story-page .story-page-img { margin-bottom: 0; }
.story-page-label {
  display: inline-block;
  background: #fff;
  border: 2px solid #c7d7fb;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 800;
  border-radius: 8px;
  padding: 2px 10px;
  margin-bottom: 5px;
}
.story-page.story-focus .story-page-label { background: #e67e22; border-color: #e67e22; color: #fff; }
.story-page.story-focus .story-page-img   { outline: 4px solid #e67e22; outline-offset: 2px; }
.story-missing-note {
  font-size: 0.8rem;
  color: #856404;
  background: #fff8e7;
  border: 2px dashed #ffc107;
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 1.5;
}
.story-missing-note code {
  background: #fff3cd;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.92em;
}

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

/* ── PAIRED-QUESTION RECAP BOX ─────────────────────────
   On a Part B: the answer to Part A (and, if the student missed
   Part A, their answer + the correct one). */
#prev-answer-recap {
  background: #f3e8ff;
  border: 2px solid #c79be8;
  border-left: 6px solid #8e44ad;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
#prev-answer-recap.hidden { display: none !important; }
.recap-head { display: flex; align-items: center; gap: 12px; }
.recap-speak { background: #fff; border-color: #c79be8; }
.recap-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.recap-line {
  background: #fff;
  border: 2px solid #d7c0ec;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.recap-label { font-weight: 800; color: #6c3483; }
.recap-ans   { font-weight: 700; }
.recap-line.recap-right { border-color: #9fd8a9; background: #effaf1; }
.recap-line.recap-right .recap-ans { color: #1e6b2e; }
.recap-line.recap-wrong { border-color: #f1b0b7; background: #fdf0f1; }
.recap-line.recap-wrong .recap-ans { color: #8a1f2b; }
/* ── 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.72rem; 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.68rem; 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; }

@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; }
  .cover-img-wrap { flex: 0 0 130px; }
}


/* ═══════════════════════════════════════════════════════
   R.A.D. PRACTICE additions
   The color check is the class routine (RAD_Answers Day 1): blue = Restate,
   green = Answer, red = Detail — each part underlined in its color.
   Text is big on purpose (most of the class reads below grade level): reading blocks 21px.
═══════════════════════════════════════════════════════ */
:root {
  --font-ui:   'Lexend', 'Segoe UI', system-ui, sans-serif;            /* QPS Literacy Hub fonts */
  --font-read: 'Andika', 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --fs:    1.15rem;
  --read:  1.3rem;          /* every block a student reads */
  --r:     #1f5fa8;  --r-bg: #e8f1fc;
  --a:     #1e7b45;  --a-bg: #e4f4ea;
  --d:     #b3261e;  --d-bg: #fdecea;
}
.container { max-width: 880px; }
body { font-family: var(--font-ui); }
.rp-say, h2#question-text, button.answer-btn, .feedback-box, .dir-text, .welcome-hero-text,
.lc-title, .missed-item, .sp-para .rp-say { font-family: var(--font-read); }
h1 { font-size: 2rem; }
.welcome-sub { font-size: 1.05rem; color: #666; }
h2#question-text { font-size: 1.4rem; line-height: 1.6; }
button.answer-btn { font-size: 1.2rem; }
.dir-section p { font-size: 1.1rem; }
.step-label { font-size: 0.95rem; }
.form-btn-sub { font-size: 0.78em; }
.reading-timer-bar, .next-timer-bar { font-size: 1.02rem; }

/* Welcome: three letter tiles instead of a picture */
.rp-cover { display: flex; gap: 10px; flex: 0 0 auto; }
.rp-tile { width: 88px; height: 104px; border-radius: 16px; color: #fff; display: flex; flex-direction: column;
           align-items: center; justify-content: center; box-shadow: 0 5px 0 rgba(0,0,0,0.25); }
.rp-tile span { font-size: 3rem; font-weight: 900; line-height: 1; }
.rp-tile small { font-size: 0.85rem; font-weight: 700; margin-top: 6px; }
.rp-tile-R { background: var(--r); } .rp-tile-A { background: var(--a); } .rp-tile-D { background: var(--d); }
@media (max-width: 600px) { .rp-tile { width: 72px; height: 88px; } .rp-tile span { font-size: 2.4rem; } }

/* Activity menu: the eight activities in teaching order */
.rp-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 600px) { .rp-menu { grid-template-columns: 1fr; } }
.rp-act { position: relative; padding: 18px 16px 16px 58px; align-items: flex-start; text-align: left; }
.rp-act-num { position: absolute; left: 14px; top: 16px; width: 32px; height: 32px; border-radius: 50%;
              background: #fff; color: var(--primary); font-weight: 900; display: flex; align-items: center; justify-content: center; }
.rp-act-name { font-size: 1.15rem; }

/* A block a student reads: its speaker on the left */
.rp-block { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; }
.rp-block .rp-speak { margin-top: 2px; background: #fff; }
.rp-say { flex: 1; font-size: var(--read); line-height: 1.6; min-width: 0; }
.rp-label { font-weight: 800; color: #555; }
.rp-p { padding: 4px 0; }
.rp-ask, .rp-story, .rp-shown, .rp-model, .rp-step, .rp-clue, .rp-ex {
  border-radius: 14px; padding: 12px 14px; }
.rp-ask   { background: #eef3ff; border: 2px solid #c5d5f5; border-left: 7px solid var(--primary); }
.rp-ask .rp-say { font-weight: 700; color: var(--primary); }
.rp-story { background: #fff8e7; border: 2px solid #ffd08a; }
.rp-shown { background: #fff; border: 2px solid #d8d8d8; }
.rp-model { background: #fff; border: 2px solid #d8d8d8; }
.rp-step  { background: #f7f7f7; border: 2px solid #e6e6e6; }
.rp-step .rp-letter { margin-right: 10px; vertical-align: 0.1em; }
.rp-letter { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; padding: 0 0.35em;
             border-radius: 999px; background: var(--primary); color: #fff; font-weight: 900; font-size: 0.95em; flex-shrink: 0; }
.rp-step-R { border-left: 7px solid var(--r); } .rp-step-R .rp-letter { background: var(--r); }
.rp-step-A { border-left: 7px solid var(--a); } .rp-step-A .rp-letter { background: var(--a); }
.rp-step-D { border-left: 7px solid var(--d); } .rp-step-D .rp-letter { background: var(--d); }
.rp-clues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 600px) { .rp-clues { grid-template-columns: 1fr; } }
.rp-clue { background: #f7f7f7; border: 2px solid #e6e6e6; margin: 6px 0; }
.rp-clue-word { color: var(--primary); }
.rp-ex { border: 2px solid; }
.rp-ex .rp-say { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; }
.rp-ex-icon { grid-row: span 2; font-size: 1.6rem; font-weight: 900; line-height: 1.2; }
.rp-ex-text { font-weight: 700; }
.rp-ex-why  { color: #333; font-size: 1.15rem; }
.rp-good { background: #effaf2; border-color: #8fd1a3; } .rp-good .rp-ex-icon { color: var(--a); }
.rp-bad  { background: #fdf2f1; border-color: #f0b3ad; } .rp-bad  .rp-ex-icon { color: var(--d); }

/* A R.A.D. answer in the color check */
.rad-model { line-height: 2.1; }
.rm-part { padding: 1px 4px 2px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rm-R { background: var(--r-bg); border-bottom: 4px solid var(--r); }
.rm-A { background: var(--a-bg); border-bottom: 4px solid var(--a); }
.rm-D { background: var(--d-bg); border-bottom: 4px solid var(--d); }
.rm-tag { display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; margin-right: 5px;
          border-radius: 50%; color: #fff; font-size: 0.72em; font-weight: 900; vertical-align: 0.15em; }
.rm-R .rm-tag { background: var(--r); } .rm-A .rm-tag { background: var(--a); } .rm-D .rm-tag { background: var(--d); }
.rm-plain { padding: 0; }
.rm-mark { background: #fff3a6; outline: 3px solid #e0a800; outline-offset: 1px; padding: 1px 4px; }
.rm-slot { display: inline-block; min-width: 9em; border: 3px dashed; background: transparent; color: #777; font-size: 0.9em;
           line-height: 1.6; padding: 2px 10px; margin: 2px 0; border-bottom-width: 3px; }
.rm-slot.rm-R { border-color: var(--r); } .rm-slot.rm-A { border-color: var(--a); } .rm-slot.rm-D { border-color: var(--d); }
.rm-slot-name { font-weight: 700; }
.rm-para { color: #555; font-size: 0.9em; white-space: nowrap; }
.rm-grow { animation: rm-grow 0.5s ease-out; }
@keyframes rm-grow { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rm-grow { animation: none; } }
.rp-built { border-color: #b9c7e6; background: #fbfcff; }
.rp-built-done { border: 3px solid var(--a); background: #f4fbf6; }

/* Choices that are a part (Color-Check): the part's letter in its color */
button.answer-btn.rp-part-btn { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.rp-part-R .rp-letter { background: var(--r); } .rp-part-A .rp-letter { background: var(--a); } .rp-part-D .rp-letter { background: var(--d); }

/* After an answer */
.feedback-box { font-size: var(--read); }
.rp-fb { margin: 0; }
.rp-fb .rp-say { font-size: var(--read); }
.rp-after { margin-top: 12px; }
.rp-after .rp-model { margin: 0; }
.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: 1rem; font-weight: 700; color: #6b3d00; }

/* Lesson cards: the card replaces the question while it is on screen */
.card-mode .question-header, .card-mode #answers, .card-mode .controls, .card-mode #feedback, .card-mode #q-show,
.card-mode .reading-timer-bar, .card-mode .next-timer-bar { display:none !important; }
.learn-card { background:#fffdf5; border:3px solid #f1c40f; border-radius:18px; padding:18px 20px; }
.lc-top { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.lc-kicker { font-weight:800; color:#8a5a00; font-size:1.05rem; }
.lc-title { font-size: 1.6rem; color: var(--primary); margin: 8px 0 6px; line-height: 1.3; }
.lc-note { font-size: 1rem; font-weight: 700; color: #6b3d00; margin: 14px 0 8px; }
.lc-btns { display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; }
.lc-back { background:#7f8c8d; box-shadow:0 4px 0 #566573; }
#lc-next:disabled { opacity:0.45; cursor:not-allowed; }

/* Look Back in the Story: the story on the left, paragraphs numbered */
.sp-para { display:flex; align-items:flex-start; gap:8px; background:#fff; border:2px solid #d6e0f5; border-radius:12px;
           padding:10px 10px; margin-bottom:10px; }
.sp-para .rp-say { font-size: 1.15rem; }
.sp-num { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; font-weight:900;
          display:flex; align-items:center; justify-content:center; margin-top:4px; }
.sp-para.sp-focus { border-color:#e67e22; box-shadow: 0 0 0 3px #e67e22; background:#fff8f0; }
.sp-para.sp-focus .sp-num { background:#e67e22; }
.story-panel-header { font-size: 1.05rem; }

/* End screen: the sign-out choice is quieter than the two main buttons */
.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; }
.again-note { text-align:center; color:#555; font-size:1rem; margin:10px 0 0; }
.signout-sub { display:block; font-size:0.8rem; font-weight:600; color:#888; margin-top:2px; }


/* ═══════════════════════════════════════════════════════
   SLIDE MODE (Teacher Access, Marcos 10/19): the activity as big slides for the board.
   Each slide is drawn as big as fits the screen (script.js _fitSlide, zoom 0.95–1.35×); 1× on a phone.
═══════════════════════════════════════════════════════ */
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-jump { font-family: inherit; font-size: 0.95rem; padding: 5px 8px; border-radius: 8px; border: 1px solid #d4b106;
           background: #fff; color: #5c4703; max-width: 300px; min-width: 0; }
.sl-exit { background: none; border: 1px solid #ffc107; border-radius: 8px; padding: 5px 12px; font: inherit; font-weight: 700;
           color: #856404; cursor: pointer; }
.sl-h { font-size: 1.6rem; color: var(--primary); margin: 4px 0 10px; }
.sl-where { display: inline-block; background: #eef3ff; color: var(--primary); font-weight: 700; font-size: 0.95rem;
            border-radius: 999px; padding: 3px 14px; margin: 0 0 6px; }
.sl-qblock .rp-say { font-size: 1.45rem; font-weight: 700; line-height: 1.5; color: #1a2a44; }
.sl-choices { display: grid; gap: 10px; margin: 8px 0 4px; }
.sl-choice-row { display: flex; align-items: center; gap: 10px; }
.sl-choice-row .rp-speak { background: #fff; flex-shrink: 0; }
.sl-choice { flex: 1 1 auto; min-width: 0; background: #fff; border: 3px solid #c5d5f5; border-radius: 14px; padding: 10px 16px;
             font-family: var(--font-read); font-size: 1.25rem; line-height: 1.45; color: #1a2a44; }
.sl-choice.sl-right { border-color: var(--a); background: var(--a-bg); font-weight: 700; box-shadow: 0 0 0 3px var(--a); }
.sl-answer { margin-top: 12px; background: #f4fbf6; border: 2px solid var(--a); border-radius: 14px; padding: 4px 12px;
             scroll-margin-bottom: 90px; }   /* 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-with-story .sl-story .story-scroll { overflow-y: auto; }   /* the story scrolls in its own column (height set by _fitSlide) */
.sl-story .story-scroll { max-height: none; }
.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: 700px) {
  .sl-with-story { display: block; }
  .sl-nav .action-btn { min-width: 0; flex: 1 1 0; }
  #sl-jump { max-width: 100%; flex: 1 1 100%; }
}


/* ═══════════════════════════════════════════════════════
   INFERENCE PRACTICE
   The IAB look (teal + mint passage), the chart (Facts From the Text + Things We
   Know = Conclusions We Draw), Part A / Part B, click-a-sentence, level buttons.
   Contrast measured: white on #0f766e 5.47:1, #0b5a54 on #f0fdfa 7.4:1,
   #5b3a00 on #ffe082 9.9:1, #1b1b1b on #fff3a8 16:1.
═══════════════════════════════════════════════════════ */
:root {
  --primary:      #0f766e;   /* IAB teal */
  --primary-dark: #0b5a54;
  --mint:         #f0fdfa;
  --mint-line:    #b7ece4;
}
body { background: linear-gradient(135deg, #0b5a54 0%, #2bb5a3 100%); }

/* Welcome: the chart as three tiles */
.ip-cover { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: center; }
.ip-tile { width: 104px; min-height: 108px; border-radius: 16px; color: #fff; display: flex; flex-direction: column;
           align-items: center; justify-content: center; text-align: center; padding: 8px 6px; box-shadow: 0 5px 0 rgba(0,0,0,0.25); }
.ip-tile span { font-size: 2.4rem; line-height: 1; }
.ip-tile small { font-size: 1rem; font-weight: 700; margin-top: 6px; line-height: 1.2; }
.ip-tile-f { background: #1f5fa8; } .ip-tile-k { background: #7b3fa0; } .ip-tile-c { background: #0f766e; }
.ip-tile-op { font-size: 2rem; font-weight: 900; color: var(--primary); }
@media (max-width: 600px) { .ip-tile { width: 88px; min-height: 96px; } .ip-tile span { font-size: 2rem; } }

/* Activity menu: a big button for the next level, then the six level buttons */
.ip-act { display: flex; flex-direction: column; gap: 8px; }
.ip-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-lvl { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; padding: 7px 10px; border-radius: 10px;
          border: 2px solid var(--primary); background: #fff; color: var(--primary-dark); cursor: pointer; min-height: 40px; }
.ip-lvl:hover { background: var(--mint); }
.ip-lvl.current { background: var(--primary); color: #fff; }
.ip-lvl.passed  { border-color: #1e7b45; color: #14532d; background: #e4f4ea; }
.ip-lvl.locked  { border-color: #9aa5a3; color: #444; background: #eef1f0; }

/* The passage, like the test: teal title bar, mint page, numbered paragraphs */
.story-panel-header { background: var(--primary); font-size: 1.05rem; padding: 10px 14px; text-align: left; }
.story-scroll { background: var(--mint); border-color: var(--mint-line); }
.sp-para { border-color: var(--mint-line); }
.sp-num { background: var(--primary); }

/* Question header pills: Part A / Part B */
.part-pill { display: inline-block; background: var(--primary); color: #fff; font-family: var(--font-ui); font-weight: 800;
             font-size: 0.95rem; border-radius: 8px; padding: 2px 10px; margin-right: 6px; vertical-align: 0.1em; }
.part-pill .wrd.hl { background: #ffe01b; color: #1b1b1b; }
.ip-partA, .ip-partB-wait, .ip-excerpt, .ip-term, .ip-term-ex, .ip-hot-help, .ip-cbox { border-radius: 12px; padding: 12px 14px; }
.ip-partA { background: #e4f4ea; border: 2px solid #8fd1a3; }
.ip-partA-ans { display: block; margin-top: 6px; font-weight: 700; color: #14532d; }
.ip-partB-wait { background: #f4f6f6; border: 2px dashed #9aa5a3; color: #333; margin-top: 14px; }
.ip-wait-note { display: block; margin-top: 4px; font-size: 1rem; color: #444; }
.ip-excerpt { background: var(--mint); border: 2px solid var(--mint-line); border-left: 7px solid var(--primary); }
.ip-excerpt .rp-label { color: var(--primary-dark); }

/* Lesson cards: a test word and its meaning */
.ip-term { background: #eef3ff; border: 2px solid #c5d5f5; border-left: 7px solid #1f5fa8; }
.ip-term-word { color: #1f5fa8; font-size: 1.1em; }
.ip-term-ex { background: #fff; border: 2px solid #d8d8d8; margin-left: 24px; }

/* The chart: Facts From the Text + Things We Know = Conclusions We Draw */
.ip-chart { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 6px; margin: 10px 0; }
.ip-chart .rp-block { margin: 0; }
.ip-cbox { border: 2px solid; height: 100%; }
.ip-cbox .rp-label { display: block; margin-bottom: 4px; }
.ip-facts { background: #e8f1fc; border-color: #9fc1ea; } .ip-facts .rp-label { color: #1f5fa8; }
.ip-know  { background: #f3eafa; border-color: #c9a6e0; } .ip-know  .rp-label { color: #6a2f8f; }
.ip-concl { background: var(--mint); border-color: #5fc4b5; } .ip-concl .rp-label { color: var(--primary-dark); }
.ip-op { align-self: center; font-size: 1.8rem; font-weight: 900; color: var(--primary); }
/* Beside the passage (and on narrow screens) the column is too narrow for three boxes
   in a row, so the chart stacks: Facts, +, Things We Know, =, Conclusions */
#quiz-screen.comp-mode .ip-chart, .sl-with-story .ip-chart { grid-template-columns: 1fr; }
#quiz-screen.comp-mode .ip-op, .sl-with-story .ip-op { text-align: center; line-height: 1; }
#quiz-screen.comp-mode .ip-cbox .rp-label, .sl-with-story .ip-cbox .rp-label { display: inline; }
@media (max-width: 900px) {
  .ip-chart { grid-template-columns: 1fr; }
  .ip-op { text-align: center; line-height: 1; }
  .ip-cbox .rp-label { display: inline; }
}

/* Click a sentence: the sentences you can click are underlined in the passage */
.ip-hot-help { background: #fff8e7; border: 2px solid #ffc107; }
.ip-hot-pick { margin: 8px 0 0 52px; font-family: var(--font-read); font-size: 1.15rem; }
.sp-para.sp-hot { border-color: #f0b429; }
.hot-s { cursor: pointer; text-decoration: underline; text-decoration-color: #c98a00; text-decoration-thickness: 2px;
         text-underline-offset: 4px; border-radius: 4px; padding: 1px 2px; }
.hot-s:hover, .hot-s:focus { background: #fff3a8; outline: none; }
.hot-s:focus-visible { outline: 3px solid #1f5fa8; }
.hot-s.selected { background: #ffe082; color: #5b3a00; box-shadow: 0 0 0 2px #c98a00; }
.hot-s.locked-choice { cursor: not-allowed; }
.hot-s.done { cursor: default; }
.hot-s.hot-right { background: #c8efd4; color: #14532d; box-shadow: 0 0 0 2px #1e7b45; text-decoration: none; }
.hot-s.hot-wrong { background: #f8d7da; color: #721c24; box-shadow: 0 0 0 2px #dc3545; text-decoration: line-through; }

/* End screen: Go Up a Level */
#up-btn.hidden { display: none !important; }

/* Click-a-sentence area next to the question (like the test's hot text) */
.ip-hot-area { background: var(--mint); border: 2px solid var(--mint-line); border-left: 7px solid #c98a00; border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.ip-hot-label { margin: 0 0 6px; font-weight: 800; color: var(--primary-dark); }
.ip-hot-para { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; }
.ip-hot-para .rp-say { font-size: var(--read); line-height: 1.9; }
#q-before .ip-partA { margin-bottom: 4px; }

/* While a passage is on screen, the page header shrinks (signposts, not reading — the
   passage and the question are what need the room on a 1366 × 650 Chromebook) */
body.comp-active .container { margin: 0.75rem auto; padding: 1rem 1.5rem 1.5rem; }
body.comp-active h1 { font-size: 1.3rem; margin-bottom: 4px; }
body.comp-active .welcome-sub { display: none; }
body.comp-active .timer-row { margin: -6px 0 6px; }
body.comp-active .timer-display { font-size: 1rem; padding: 3px 12px; }
body.comp-active .story-scroll { max-height: calc(100vh - 90px); }
.ip-partA-why { background: #e4f4ea; border: 2px solid #8fd1a3; border-radius: 12px; padding: 10px 14px; }

/* The flow: ▶ Continue on the menu, ▶ Next on the end screen */
.ip-continue { width: 100%; background: #8e44ad; box-shadow: 0 5px 0 #6c3483; margin-bottom: 10px; font-size: 1.25rem; }
.ip-continue:hover { box-shadow: 0 8px 0 #6c3483; }
.ip-menu-note { margin: 12px 0 8px; font-size: 1.05rem; color: #333; }
#next-step-btn.hidden, #continue-btn.hidden { display: none !important; }