/* ============================================================
   PASSMYEXAMS — COMPONENTS
   Subject cards, topic cards, flashcards, quiz, mock exam,
   mind map, diagrams, lessons.
   ============================================================ */

/* ============ SUBJECT CARDS (home) ============ */
.subject-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.3rem; }
.subject-card { position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .2s, box-shadow .2s, border-color .2s; text-decoration:none; color:inherit; }
.subject-card:hover { transform:translateY(-5px); box-shadow:var(--sh-3); border-color:transparent; color:inherit; }
.subject-card .card-top { position:relative; height:96px; display:flex; align-items:center; padding:0 1.3rem;
  gap:.9rem; background:linear-gradient(135deg,var(--sc1,#4f46e5),var(--sc2,#7c3aed)); color:#fff;
  overflow:hidden; }
.subject-card .card-top::after { content:''; position:absolute; right:-30px; top:-40px; width:130px; height:130px;
  border-radius:50%; background:rgba(255,255,255,.13); }
.subject-card .card-top::before { content:''; position:absolute; right:20px; bottom:-50px; width:90px; height:90px;
  border-radius:50%; background:rgba(255,255,255,.10); }
.subject-card .card-ico { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.2);
  display:grid; place-items:center; backdrop-filter:blur(4px); flex:none; z-index:1; }
.subject-card .card-ico .ic { width:28px; height:28px; stroke-width:2; }
.subject-card .card-badge { z-index:1; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; opacity:.92; }
.subject-card .card-body { padding:1.15rem 1.3rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.subject-card h3 { font-size:1.2rem; margin-bottom:.35rem; }
.subject-card .card-desc { font-size:.9rem; color:var(--text-muted); margin-bottom:1rem; flex:1; }
.subject-card .card-stats { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.chip { background:var(--accent-soft); color:var(--accent-ink); padding:.28rem .65rem; border-radius:var(--r-pill);
  font-size:.74rem; font-weight:700; display:inline-flex; align-items:center; gap:.3rem; }
.subject-card .card-go { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:.9rem;
  color:var(--accent-ink); }
.subject-card:hover .card-go { gap:.6rem; }
.subject-card.soon { opacity:.62; pointer-events:none; }
.subject-card.soon .card-badge::after { content:' · soon'; }

/* ============ TOPIC CARDS (subject index) ============ */
.topic-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; }
.topic-card { position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); padding:1.3rem; box-shadow:var(--sh-1);
  transition:transform .18s, box-shadow .18s, border-color .18s; text-decoration:none; color:inherit;
  overflow:hidden; }
.topic-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); }
.topic-card:hover { transform:translateY(-4px); box-shadow:var(--sh-3); border-color:color-mix(in srgb,var(--accent) 40%,transparent); color:inherit; }
.topic-card .topic-index { position:absolute; top:.9rem; right:1.1rem; font-family:var(--display); font-weight:800;
  font-size:2.4rem; line-height:1; color:var(--accent); opacity:.14; }
.topic-card .topic-ico { width:44px; height:44px; border-radius:12px; background:var(--accent-soft);
  color:var(--accent-ink); display:grid; place-items:center; margin-bottom:.8rem; }
.topic-card .topic-ico .ic { width:24px; height:24px; }
.topic-card h3 { font-size:1.12rem; margin-bottom:.6rem; padding-right:2rem; }
.topic-card ul { list-style:none; margin:0 0 .9rem; padding:0; font-size:.85rem; color:var(--text-muted); }
.topic-card ul li { position:relative; padding-left:1.1rem; margin-bottom:.25rem; }
.topic-card ul li::before { content:''; position:absolute; left:0; top:.55em; width:5px; height:5px;
  border-radius:50%; background:var(--accent); }
.topic-card .topic-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.topic-card .card-go { display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.86rem;
  color:var(--accent-ink); }
.topic-card .topic-progress { flex:1; }
.topic-card .topic-progress .progress-bar { height:6px; }

/* ============ TOOL STRIP (index quick tools) ============ */
.tool-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin:0 0 2rem; }
.tool-strip a { display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); font-weight:600; font-size:.92rem; color:var(--text-soft);
  box-shadow:var(--sh-1); transition:all .16s; }
.tool-strip a:hover { border-color:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }
.tool-strip .ic { color:var(--accent); width:22px; height:22px; }

/* ============ FLASHCARDS ============ */
.flashcards-section,.quiz-section,.mock-exam-section,.mindmap-section { margin:2.6rem 0; scroll-margin-top:calc(var(--header-h) + 14px); }
.section-title { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.section-title .ic { color:var(--accent); }
.section-sub { color:var(--text-muted); font-size:.92rem; margin-bottom:1.2rem; }

.flashcard-controls { display:flex; align-items:center; justify-content:center; gap:.7rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.flashcard-counter { font-weight:700; color:var(--text-soft); min-width:120px; text-align:center; font-variant-numeric:tabular-nums; }
.flashcard-deck { perspective:1400px; width:100%; max-width:520px; height:290px; margin:0 auto 1rem; cursor:pointer; }
.flashcard { width:100%; height:100%; position:relative; transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,0,.2,1); }
.flashcard.flipped { transform:rotateY(180deg); }
.flashcard-front,.flashcard-back { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; text-align:center;
  border-radius:var(--r-lg); box-shadow:var(--sh-2); border:1px solid var(--border); }
.flashcard-front { background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 10%, var(--surface)), var(--surface)); }
.flashcard-front .term { font-family:var(--display); font-size:1.6rem; font-weight:700; color:var(--text); }
.flashcard-front .tap-hint { position:absolute; bottom:16px; font-size:.8rem; color:var(--text-faint); font-weight:600;
  display:flex; align-items:center; gap:.3rem; }
.flashcard-back { background:linear-gradient(150deg, var(--accent), var(--accent-2)); color:#fff;
  transform:rotateY(180deg); border-color:transparent; }
.flashcard-back .definition { font-size:1.12rem; line-height:1.55; }
.flashcard-back .subtopic-ref { position:absolute; bottom:14px; font-size:.76rem; opacity:.8; font-weight:600; }

/* ============ QUIZ ============ */
.quiz-score { display:none; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--accent-ink);
  background:var(--accent-soft); padding:.7rem 1.1rem; border-radius:var(--r); margin-bottom:1.2rem; text-align:center; }
.quiz-score.visible { display:block; }
.quiz-question { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border-strong);
  padding:1.1rem 1.3rem; margin-bottom:1rem; border-radius:0 var(--r) var(--r) 0; box-shadow:var(--sh-1); transition:border-color .25s; }
.quiz-question.correct { border-left-color:var(--good); background:var(--good-soft); }
.quiz-question.incorrect { border-left-color:var(--bad); background:var(--bad-soft); }
.quiz-question.unanswered { border-left-color:var(--warn); }
.quiz-question .q-number { font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent);
  font-weight:800; margin-bottom:.35rem; }
.quiz-question .q-text { font-weight:600; margin-bottom:.9rem; }
.quiz-options { list-style:none; margin:0; padding:0; }
.quiz-options li { margin-bottom:.4rem; }
.quiz-options label { display:flex; align-items:flex-start; gap:.6rem; padding:.6rem .8rem; border-radius:10px;
  cursor:pointer; border:1px solid transparent; transition:background .15s; font-size:.95rem; }
.quiz-options label:hover { background:var(--accent-soft); }
.quiz-options input { margin-top:3px; accent-color:var(--accent); flex:none; }
.quiz-short-answer { width:100%; padding:.65rem .85rem; border:1px solid var(--border-strong); border-radius:10px;
  font-family:var(--font); font-size:.98rem; background:var(--surface-2); color:var(--text); }
.quiz-short-answer:focus { outline:none; border-color:var(--accent); }
.quiz-answer { display:none; margin-top:.8rem; padding:.8rem 1rem; border-radius:10px; font-size:.92rem; }
.quiz-answer.visible { display:block; }
.quiz-answer.correct-answer { background:var(--good-soft); border-left:4px solid var(--good); }
.quiz-answer.incorrect-answer { background:var(--bad-soft); border-left:4px solid var(--bad); }
.quiz-answer .answer-label { font-weight:700; margin-bottom:.2rem; display:flex; align-items:center; gap:.35rem; }
.quiz-answer .explanation { color:var(--text-muted); font-size:.86rem; margin-top:.35rem; }
.quiz-buttons { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }

/* ============ MOCK EXAM ============ */
.mock-exam-intro { background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  border-radius:var(--r); padding:1rem 1.2rem; margin-bottom:1.5rem; font-size:.95rem; }
.mock-exam-question { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--accent);
  border-radius:var(--r); padding:1.3rem; margin-bottom:1.3rem; box-shadow:var(--sh-1); }
.mock-exam-question .context { font-style:italic; color:var(--text-muted); background:var(--surface-2);
  padding:.7rem .9rem; border-radius:10px; margin-bottom:1rem; }
.exam-part { padding:.8rem 0 .8rem 1rem; border-left:2px solid var(--border); margin-bottom:.6rem; }
.exam-part .part-label { font-weight:800; color:var(--accent-ink); }
.exam-part .question-text { margin:.35rem 0; }
.mark-allocation { display:inline-block; background:var(--accent-soft); color:var(--accent-ink); padding:.12rem .55rem;
  border-radius:var(--r-pill); font-size:.76rem; font-weight:800; margin-left:.4rem; }
.model-answer { display:none; margin-top:.7rem; padding:.9rem 1rem; background:var(--good-soft); border-radius:10px;
  border-left:4px solid var(--good); }
.model-answer.visible { display:block; }
.model-answer .answer-heading { font-weight:800; color:var(--good); margin-bottom:.4rem; display:flex; align-items:center; gap:.35rem; }
.model-answer .examiner-tip { margin-top:.6rem; padding:.5rem .75rem; background:var(--warn-soft); border-radius:8px;
  font-size:.86rem; border-left:3px solid var(--warn); }
.model-answer .examiner-tip strong { color:var(--warn); }
.mock-total-marks { text-align:right; font-family:var(--display); font-weight:700; color:var(--accent-ink);
  margin-top:.8rem; }

/* ============ DIAGRAMS ============ */
.diagram-container { margin:1.6rem 0; }
.diagram-container h4 { margin-bottom:.7rem; display:flex; align-items:center; gap:.4rem; color:var(--accent-ink); }
.diagram-wrapper { background:var(--surface); border:1px solid var(--border); padding:1.4rem; border-radius:var(--r);
  box-shadow:var(--sh-1); }
.diagram-wrapper svg { display:block; margin:0 auto; width:100%; height:auto; }
.diagram-controls { margin-top:.9rem; display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap; }
.diagram-label { cursor:pointer; }
.diagram-label text { transition:fill .2s; }
.diagram-label.hidden text { fill:transparent!important; }
.diagram-label.hidden rect { stroke:var(--accent); stroke-dasharray:4 3; fill:color-mix(in srgb,var(--accent) 12%, transparent); }
.diagram-caption { font-size:.8rem; color:var(--text-muted); text-align:center; margin-top:.6rem; font-style:italic; }

/* ============ MIND MAP ============ */
.mindmap-container { background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sh-1); padding:1.2rem; overflow-x:auto; }
.mindmap-container svg { width:100%; min-width:560px; height:auto; }
.mindmap-node { cursor:pointer; transition:filter .15s; }
.mindmap-node:hover { filter:brightness(1.08); }
.mindmap-node text { font-family:var(--font); font-weight:600; pointer-events:none; }
.mindmap-path { fill:none; stroke-width:2.4; stroke-linecap:round; }

/* ============ COLLAPSIBLE ============ */
.collapsible-trigger { display:flex; align-items:center; gap:.6rem; width:100%; padding:.9rem 1.1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r); cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:1rem; color:var(--text); text-align:left; margin-bottom:.6rem; }
.collapsible-trigger:hover { border-color:var(--accent); }
.collapsible-trigger .arrow { margin-left:auto; transition:transform .25s; color:var(--accent); }
.collapsible-trigger.active .arrow { transform:rotate(90deg); }
.collapsible-content { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.collapsible-content.open { max-height:6000px; }

/* ============================================================
   LESSONS (new feature)
   ============================================================ */
.lessons-toolbar { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.lessons-filter { display:flex; gap:.4rem; flex-wrap:wrap; }
.lesson-chip { padding:.42rem .85rem; border-radius:var(--r-pill); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text-soft); font-size:.82rem; font-weight:600; cursor:pointer; transition:all .15s; }
.lesson-chip:hover { border-color:var(--accent); color:var(--accent-ink); }
.lesson-chip.active { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent; }
.lessons-progress { margin-left:auto; min-width:180px; }

.lessons-list { display:grid; gap:1rem; }
.lesson-card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sh-1); overflow:hidden; transition:box-shadow .18s, border-color .18s; }
.lesson-card:hover { box-shadow:var(--sh-2); }
.lesson-card.done { border-color:color-mix(in srgb,var(--good) 45%, transparent); }
.lesson-head { display:flex; align-items:center; gap:.9rem; padding:1rem 1.2rem; cursor:pointer; }
.lesson-num { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:1rem; background:var(--accent-soft); color:var(--accent-ink); }
.lesson-card.done .lesson-num { background:var(--good); color:#fff; }
.lesson-headings { flex:1; min-width:0; }
.lesson-headings .lesson-topic { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:800;
  color:var(--accent); }
.lesson-headings h3 { font-size:1.05rem; margin:0; font-family:var(--display); }
.lesson-toggle { flex:none; color:var(--text-muted); transition:transform .25s; }
.lesson-card.open .lesson-toggle { transform:rotate(180deg); }
.lesson-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.lesson-card.open .lesson-body { max-height:1200px; }
.lesson-body-inner { padding:0 1.2rem 1.2rem 4.1rem; }
.lesson-summary { color:var(--text-soft); margin-bottom:.8rem; }
.lesson-points { margin:0 0 1rem; padding-left:1.1rem; }
.lesson-points li { font-size:.92rem; color:var(--text-soft); }
.lesson-links { display:flex; gap:.6rem; flex-wrap:wrap; }
.lesson-link { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .95rem; border-radius:10px;
  font-weight:700; font-size:.86rem; border:1px solid var(--border); transition:all .15s; }
.lesson-link .ic { width:18px; height:18px; }
.lesson-link.yt { color:#c4302b; background:color-mix(in srgb,#c4302b 8%, var(--surface)); border-color:color-mix(in srgb,#c4302b 30%,transparent); }
.lesson-link.yt:hover { background:color-mix(in srgb,#c4302b 16%, var(--surface)); }
.lesson-link.bbc { color:#1380a1; background:color-mix(in srgb,#1380a1 8%, var(--surface)); border-color:color-mix(in srgb,#1380a1 30%,transparent); }
.lesson-link.bbc:hover { background:color-mix(in srgb,#1380a1 16%, var(--surface)); }
.lesson-link.sheet { color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, var(--surface)); border-color:color-mix(in srgb,var(--accent) 30%,transparent); }
.lesson-link.sheet:hover { background:color-mix(in srgb,var(--accent) 16%, var(--surface)); }
/* ---- Higher-tier markers (Eduqas Maths: Foundation vs Higher) ---- */
.tier-pill { display:inline-block; padding:.08rem .5rem; border-radius:999px; vertical-align:middle;
  background:color-mix(in srgb,var(--accent) 14%, var(--surface)); color:var(--accent-ink);
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  margin-right:.45rem; white-space:nowrap; }
.lesson-headings .tier-pill { margin-left:.5rem; margin-right:0; }
.lesson-higher-note { display:flex; align-items:flex-start; gap:.45rem; margin:.1rem 0 .6rem;
  padding:.5rem .7rem; border-radius:9px; font-size:.83rem; color:var(--text-soft);
  background:color-mix(in srgb,var(--accent) 7%, var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); }
.lesson-higher-note .ic { width:16px; height:16px; flex-shrink:0; margin-top:.1rem; color:var(--accent); }

.lesson-done-btn { display:inline-flex; align-items:center; gap:.4rem; margin-left:auto; padding:.55rem .9rem;
  border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted);
  font-weight:700; font-size:.82rem; cursor:pointer; transition:all .15s; }
.lesson-done-btn:hover { border-color:var(--good); color:var(--good); }
.lesson-card.done .lesson-done-btn { background:var(--good); color:#fff; border-color:var(--good); }

@media (max-width:640px){
  .flashcard-deck { height:250px; }
  .lesson-body-inner { padding-left:1.2rem; }
  .quiz-buttons .btn, .lesson-links { width:auto; }
}