/* =============================================
   LEARNTIT — RECALL & RETRIEVAL INTERACTIVE SHEETS
   Shared stylesheet for every interactive recall &
   retrieval HTML page (GCSE now, KS3 / iGCSE / A-Level
   to follow — same design, different content).

   Self-contained, like worksheet.css — does not rely
   on global.css. Simpler than the worksheet system:
   no whiteboard, no flagging, no paywall, no mark-
   scheme working space. Two actions per question:
   Reveal Answer (modal) and mark-complete (tick).
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Variables ────────────────────────────── */
:root {
  --rq-blue:        #679EF5;
  --rq-blue-light:  #e2ebfa;
  --rq-black:       #111111;
  --rq-grey-dark:   #4F4F4F;
  --rq-grey-mid:    #888888;
  --rq-grey-light:  #D9D9D9;
  --rq-grey-bg:     #F0F0F0;
  --rq-white:       #ffffff;
  --rq-green:       #4CAF81;
  --rq-green-bg:    #e2f3eb;

  --rq-font-heading: 'Manrope', system-ui, sans-serif;
  --rq-font-body:    'Inter', system-ui, sans-serif;

  --rq-radius:      8px;
  --rq-radius-pill: 999px;

  --rq-sheet-w: 900px;
}

/* ── Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
strong { font-weight: 700; }
em { font-style: italic; }

body {
  font-family: var(--rq-font-body);
  font-size: 11pt;
  color: var(--rq-black);
  line-height: 1.55;
  background: var(--rq-grey-bg);
  -webkit-font-smoothing: antialiased;
  padding: 24px 16px 60px;
}

/* ═══════════════════════════════════════════
   SHEET SHELL — one continuous "paper" card,
   not paginated like the worksheet A4 system,
   since these are quick mental-recall questions
   meant to be scrolled, not printed page by page.
   ═══════════════════════════════════════════ */

.rq-sheet {
  width: 100%;
  max-width: var(--rq-sheet-w);
  background: var(--rq-white);
  margin: 0 auto;
  box-shadow: 0 4px 28px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 10px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════
   COVER
   ═══════════════════════════════════════════ */

.rq-cover {
  padding: 34px 30px 26px;
}

.rq-cover-logo-wrap {
  margin-bottom: 22px;
}

.rq-cover-logo {
  height: 34px;
  width: auto;
}

.rq-cover-subject-label {
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rq-grey-mid);
  margin-bottom: 8px;
}

.rq-cover-title {
  font-family: var(--rq-font-heading);
  font-size: 32pt;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rq-black);
  margin-bottom: 10px;
}

.rq-cover-type {
  font-family: var(--rq-font-heading);
  font-size: 12pt;
  font-weight: 400;
  color: var(--rq-grey-dark);
  margin-bottom: 18px;
}

.rq-cover-divider {
  border: none;
  border-top: 1px solid var(--rq-grey-light);
  margin-bottom: 14px;
}

.rq-cover-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.rq-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: var(--rq-radius-pill);
  font-size: 8.5pt;
  font-weight: 600;
  line-height: 1;
}

.rq-pill.subject { background: var(--rq-blue);   color: var(--rq-white); }
.rq-pill.tier     { background: var(--rq-black);  color: var(--rq-white); }
.rq-pill.count    { background: var(--rq-grey-bg); color: var(--rq-grey-dark); border: 1px solid var(--rq-grey-light); }

.rq-cover-breadcrumb {
  font-size: 9pt;
  color: var(--rq-grey-dark);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.rq-cover-breadcrumb-sep { color: var(--rq-grey-mid); }

/* How to use box */
.rq-cover-howto {
  background: var(--rq-blue-light);
  border-radius: 0 var(--rq-radius) var(--rq-radius) 0;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.rq-cover-howto-title {
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rq-grey-mid);
  margin-bottom: 8px;
}

.rq-cover-howto ol {
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rq-cover-howto li {
  font-size: 9pt;
  color: var(--rq-grey-dark);
  line-height: 1.45;
}

/* Progress stats */
.rq-cover-stats {
  background: var(--rq-grey-bg);
  border-radius: var(--rq-radius);
  padding: 14px 16px 15px;
}

.rq-cover-stats-label {
  font-size: 7pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rq-grey-mid);
  margin-bottom: 10px;
}

.rq-stats-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.rq-stats-progress-track {
  flex: 1;
  height: 7px;
  background: var(--rq-grey-light);
  border-radius: var(--rq-radius-pill);
  overflow: hidden;
}

.rq-stats-progress-fill {
  height: 100%;
  background: var(--rq-green);
  border-radius: var(--rq-radius-pill);
  width: 0%;
  transition: width 350ms ease;
}

.rq-stats-progress-text {
  font-size: 8.5pt;
  font-weight: 700;
  color: var(--rq-grey-dark);
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}

.rq-stats-row {
  display: flex;
  align-items: center;
}

.rq-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.rq-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--rq-grey-light);
  flex-shrink: 0;
}

.rq-stat-number {
  font-family: var(--rq-font-heading);
  font-size: 19pt;
  font-weight: 800;
  line-height: 1;
  color: var(--rq-black);
  transition: color 250ms ease;
}

.rq-stat-number.stat-completed { color: var(--rq-green); }

.rq-stat-label {
  font-size: 7pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rq-grey-mid);
}

/* ═══════════════════════════════════════════
   CONTENTS NAV
   Two forms of the same jump-list, generated
   together: a chip row on the cover (every
   screen size) and a floating rail that fades
   in once the reader scrolls past the cover
   (wide screens only — hidden below 1100px).
   ═══════════════════════════════════════════ */

.rq-toc-inline {
  margin-top: 14px;
}

.rq-toc-inline-label {
  font-size: 7pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rq-grey-mid);
  margin-bottom: 8px;
}

.rq-toc-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rq-toc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 5px;
  border-radius: var(--rq-radius-pill);
  background: var(--rq-white);
  border: 1px solid var(--rq-grey-light);
  font-size: 8pt;
  font-weight: 600;
  color: var(--rq-grey-dark);
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.rq-toc-chip:hover {
  border-color: var(--rq-blue);
  color: var(--rq-blue);
}

.rq-toc-chip.active {
  border-color: var(--rq-blue);
  background: var(--rq-blue-light);
  color: var(--rq-blue);
}

.rq-toc-chip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rq-grey-bg);
  font-size: 7pt;
  font-weight: 700;
  color: var(--rq-grey-dark);
  flex-shrink: 0;
}

.rq-toc-chip:hover .rq-toc-chip-num,
.rq-toc-chip.active .rq-toc-chip-num {
  background: var(--rq-blue);
  color: var(--rq-white);
}

/* Floating rail — appears on scroll, wide screens only */
.rq-toc-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px 12px;
  background: var(--rq-white);
  border: 1px solid var(--rq-grey-light);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.rq-toc-rail.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rq-toc-rail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.rq-toc-rail-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rq-grey-light);
  flex-shrink: 0;
  transition: background 150ms ease, transform 150ms ease;
}

.rq-toc-rail-item.active .rq-toc-rail-dot {
  background: var(--rq-blue);
  transform: scale(1.3);
}

.rq-toc-rail-label {
  font-size: 8.5pt;
  font-weight: 600;
  color: var(--rq-grey-dark);
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 220ms ease, opacity 180ms ease;
}

.rq-toc-rail:hover .rq-toc-rail-label {
  max-width: 320px;
  opacity: 1;
}

.rq-toc-rail-item.active .rq-toc-rail-label {
  color: var(--rq-blue);
}

@media (max-width: 250px) {
  .rq-toc-rail { display: none; }
}

@media print {
  .rq-toc-rail, .rq-toc-inline { display: none !important; }
}

/* ═══════════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════════ */

.rq-content {
  padding: 6px 30px 34px;
}

.rq-paper-heading {
  font-family: var(--rq-font-heading);
  font-size: 20pt;
  font-weight: 800;
  color: var(--rq-black);
  margin: 30px 0 6px;
  padding-top: 18px;
  border-top: 2px solid var(--rq-black);
}

.rq-content > .rq-paper-heading:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 6px;
}

.rq-topic-heading {
  font-family: var(--rq-font-heading);
  font-size: 15pt;
  font-weight: 700;
  color: var(--rq-black);
  margin: 22px 0 4px;
  scroll-margin-top: 20px;
}

.rq-subtopic {
  margin-top: 20px;
}

.rq-subtopic-heading {
  font-family: var(--rq-font-heading);
  font-size: 11pt;
  font-weight: 700;
  color: var(--rq-black);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rq-grey-light);
}

.rq-list {
  display: flex;
  flex-direction: column;
}

/* ── Question row ────────────────────────── */
.rq-question {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #EBEBEB;
}

.rq-list .rq-question:last-child { border-bottom: none; }

.rq-q-number {
  font-weight: 700;
  font-size: 9.5pt;
  min-width: 20px;
  padding-top: 2px;
  color: var(--rq-grey-dark);
  flex-shrink: 0;
}

.rq-q-text {
  flex: 1;
  min-width: 0;
  font-size: 10.5pt;
  line-height: 1.5;
  padding-top: 1px;
}

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

.rq-reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--rq-radius-pill);
  border: 1.5px solid var(--rq-grey-light);
  background: var(--rq-white);
  color: var(--rq-grey-dark);
  font-family: var(--rq-font-body);
  font-size: 8.5pt;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.rq-reveal-btn:hover {
  background: var(--rq-blue);
  border-color: var(--rq-blue);
  color: var(--rq-white);
}

/* Done (tick) button — matches the card mark-as-complete
   control used on the resource listing pages */
.rq-done-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--rq-grey-light);
  background: var(--rq-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
}

.rq-done-btn:hover {
  background: var(--rq-blue);
  border-color: var(--rq-blue);
}

.rq-done-btn:hover svg { color: var(--rq-white); }
.rq-done-btn:active { transform: scale(0.90); }

.rq-done-btn svg {
  width: 13px;
  height: 13px;
  color: var(--rq-grey-light);
  flex-shrink: 0;
}

.rq-done-btn.done {
  background: var(--rq-green);
  border-color: var(--rq-green);
}

.rq-done-btn.done svg { color: var(--rq-white); }

/* Hidden answer data (read by JS, never visible directly) */
.rq-answer { display: none !important; }

/* ═══════════════════════════════════════════
   REVEAL ANSWER MODAL
   ═══════════════════════════════════════════ */

.rq-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.rq-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rq-modal-container {
  width: min(480px, 96vw);
  background: var(--rq-white);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.rq-modal-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--rq-grey-light);
  flex-shrink: 0;
}

.rq-modal-title {
  font-family: var(--rq-font-heading);
  font-size: 11pt;
  font-weight: 700;
  color: var(--rq-black);
}

.rq-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--rq-grey-light);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rq-grey-dark);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.rq-modal-close:hover {
  background: var(--rq-black);
  color: var(--rq-white);
  border-color: var(--rq-black);
}

.rq-modal-body {
  padding: 16px 20px 22px;
  overflow-y: auto;
}

.rq-modal-question {
  font-size: 9.5pt;
  color: var(--rq-grey-dark);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--rq-grey-light);
}

.rq-modal-answer {
  font-size: 11pt;
  line-height: 1.6;
  color: var(--rq-black);
}

/* ═══════════════════════════════════════════
   MOBILE (≤640px)
   ═══════════════════════════════════════════ */

@media (max-width: 640px) {
  body { padding: 0; }

  .rq-sheet { border-radius: 0; box-shadow: none; }

  .rq-cover { padding: 20px 18px 18px; }

  .rq-cover-title { font-size: 24pt; }

  .rq-content { padding: 4px 18px 28px; }

  .rq-paper-heading { font-size: 16pt; }
  .rq-topic-heading { font-size: 13pt; }

  .rq-question {
    flex-wrap: wrap;
  }

  .rq-q-text {
    flex-basis: 100%;
    order: 1;
  }

  .rq-q-actions {
    order: 2;
    margin-left: 30px;
    margin-top: 6px;
  }
}

/* ═══════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════ */

@media print {
  body { background: var(--rq-white); padding: 0; }
  .rq-sheet { box-shadow: none; border-radius: 0; }
  .rq-q-actions, .rq-modal-overlay, .rq-cover-stats { display: none !important; }
}