/* ============================================================
   Global MCQ Practice — v2
   Idea: an OMR answer sheet. Bubbles fill with graphite when you
   tap; the checker stamps a green tick or red cross.
   ============================================================ */

:root {
  --paper:      #F6F5F0;
  --paper-2:    #EDEBE3;   /* rules, light fills */
  --ink:        #17203A;
  --graphite:   #3F4652;
  --pencil:     #6B7280;   /* secondary text */
  --hairline:   #D6D3C8;
  --saffron:    #D98E04;   /* one accent: streak + today's set */
  --tick:       #1F6B3F;
  --tick-bg:    #E3EFE7;
  --cross:      #A93226;
  --cross-bg:   #F5E4E1;
  --tick-text:  #1F6B3F;
  --cross-text: #A93226;

  --serif:  "Newsreader", "Newsreader Fallback", Georgia, serif;
  --sans:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --measure: 42rem;
  --header-h: 52px;
  --r: 4px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] {
  --paper:    #15181F;
  --paper-2:  #1E222B;
  --ink:      #ECEAE3;
  --graphite: #C9CCD3;
  --pencil:   #9AA0AB;
  --hairline: #2E333D;
  --tick-bg:  #16321F;
  --cross-bg: #3A1B18;
  --tick-text:  #7FD19A;
  --cross-text: #F0918A;
}

@font-face { font-family:"Newsreader Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; }

/* ---------- base ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.i { width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.18em; flex:none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip-link { position:absolute; left:-999px; top:8px; padding:.5rem .75rem; background:var(--ink); color:var(--paper); z-index:200; }
.skip-link:focus { left:8px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.brand { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.header-nav { display:flex; align-items:center; gap:.25rem; }
.header-nav a, .header-nav button {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .6rem; border-radius:var(--r);
  font-size:.9rem; color:var(--graphite); text-decoration:none;
}
.header-nav a:hover, .header-nav button:hover { background: var(--paper-2); color: var(--ink); }
#sound-toggle[aria-pressed="false"] { opacity:.5; }

/* ---------- layout ---------- */
.page { max-width: var(--measure); margin: 0 auto; padding: 1.25rem clamp(1rem, 4vw, 2rem) 3rem; }
.crumbs:not(:has(a)) { display:none; }
.crumbs { font-size:.82rem; color:var(--pencil); margin-bottom:1rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.crumbs a { text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.crumbs [aria-current] { color:var(--ink); }

/* ---------- sticky bar: progress / score / timer ---------- */
.sticky-bar {
  position: sticky; top: var(--header-h); z-index: 90;
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem 0;
  margin: 0 0 .75rem;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  font-size: .85rem; color: var(--pencil);
  font-variant-numeric: tabular-nums;
}
.bar { flex:1; height:3px; background:var(--paper-2); }
.bar-fill { height:100%; width:0; background:var(--ink); transition: width .4s var(--ease); }
#score-display { color: var(--ink); }
#timer-display { display:inline-flex; align-items:center; gap:.3rem; }
#timer-display.warning { color: var(--saffron); }
#timer-display.danger  { color: var(--cross); }
#timer-display.completed { color: var(--tick); }

.streak-pill {
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.15rem .5rem; border-radius:999px;
  background: var(--saffron); color:#fff; font-weight:600;
}
.streak-pill[hidden] { display:none; }
.streak-pill.bump { animation: bump .4s var(--ease); }
@keyframes bump { 40% { transform: scale(1.25); } }

/* ---------- search ---------- */
.search { display:flex; align-items:center; gap:.5rem; margin:0 0 1.5rem; color:var(--pencil); font-size:.85rem; }
.search input { flex:1; padding:.4rem 0; border:0; border-bottom:1px solid var(--hairline); background:none; color:var(--ink); font:inherit; }
.search input:focus { outline:none; border-bottom-color: var(--ink); }

/* ---------- quiz title ---------- */
.quiz-title { font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,4vw,2.1rem); line-height:1.15; margin:.5rem 0 1.5rem; display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; }
.set-no { font-family:var(--sans); font-size:.85rem; color:var(--pencil); font-weight:400; }

/* ---------- the MCQ ---------- */
.mcq {
  border: 0; border-top: 1px solid var(--hairline);
  padding: 1.5rem 0 1.75rem;
}
.mcq legend {
  float:left; width:100%;               /* legend inside fieldset: make it flow */
  display:flex; gap:.9rem; align-items:flex-start;
  font-family: var(--serif); font-size:1.18rem; line-height:1.4; font-weight:500;
  margin-bottom: 1rem;
}
.qno { font-family:var(--sans); font-size:.8rem; color:var(--pencil); min-width:1.6rem; padding-top:.3rem; font-variant-numeric:tabular-nums; }
.qtext { flex:1; }
.mcq[data-answered="true"] legend { color: var(--graphite); }

.options { list-style:none; clear:both; }
.options li + li { margin-top:.35rem; }

.option {
  display:flex; align-items:flex-start; gap:.85rem;
  width:100%; padding:.55rem .5rem .55rem 0;
  text-align:left; border-radius:var(--r);
  transition: background .15s;
}
.option:not(:disabled):hover { background: var(--paper-2); }
.option:disabled { cursor: default; }

/* the bubble — the one memorable element */
.bubble {
  flex:none; width:1.65rem; height:1.65rem; margin-left:.25rem;
  border:1.5px solid var(--graphite); border-radius:50%;
  display:inline-grid; place-items:center;
  font-size:.72rem; font-weight:600; color:var(--graphite);
  transition: background .18s var(--ease), color .18s, border-color .18s, transform .18s var(--ease);
  position: relative;
}
.option:not(:disabled):hover .bubble { border-color: var(--ink); }
.option:active .bubble { transform: scale(.9); }
.option-text { flex:1; padding-top:.1rem; }

/* graphite fill on selection */
.option[aria-checked="true"] .bubble { background: var(--graphite); color: var(--paper); border-color: var(--graphite); }

/* checker's stamp */
.option.correct .bubble   { background: var(--tick);  border-color: var(--tick);  color:#fff; }
.option.incorrect .bubble { background: var(--cross); border-color: var(--cross); color:#fff; }
.option.correct .bubble::after, .option.incorrect .bubble::after {
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid currentColor; color:inherit; opacity:0;
  animation: stamp .35s var(--ease) forwards;
}
.option.correct .bubble::after   { color: var(--tick); }
.option.incorrect .bubble::after { color: var(--cross); }
@keyframes stamp { 0% { transform:scale(1.5); opacity:0 } 60% { opacity:.6 } 100% { transform:scale(1); opacity:.35 } }
.option.correct   { background: var(--tick-bg); }
.option.incorrect { background: var(--cross-bg); }
.option.correct .option-text   { color: var(--tick-text); }
.option.incorrect .option-text { color: var(--cross-text); }

/* reveal + explanation */
.reveal { display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-size:.85rem; color:var(--pencil); padding:.25rem 0; }
.reveal:hover { color: var(--ink); }
.answer { margin-top:.9rem; padding-left:calc(1.65rem + .25rem + .85rem); font-size:.95rem; }
.answer-line, .correct-answer { color: var(--tick-text); }
.explanation-text { margin-top:.4rem; color:var(--graphite); }
.explanation-missing { color:var(--pencil); font-style:italic; }

/* ---------- rich explanation blocks ----------
   Supports the fuller explanation format: exam relevance, difficulty,
   concept notes, common mistakes, full explanation, per-option analysis,
   and a mnemonic. All are optional — only what's present is shown.
   Shares the .answer's left indent (set on the parent). */
.answer .label {
  display:block;
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  color:var(--pencil); margin-bottom:.2rem;
}

.exam-relevance, .difficulty, .concept-notes, .common-mistakes,
.options-analysis, .mnemonic {
  margin-top:1rem; padding-top:1rem;
  border-top:1px solid var(--hairline);
  font-size:.92rem; color:var(--graphite);
}

/* Difficulty: shows a coloured tag if a data-level attribute is present
   ("Easy" / "Moderate" / "Hard"); otherwise falls back to plain text so
   markup without that attribute never renders an empty pill. */
.difficulty[data-level] { display:flex; align-items:baseline; gap:.5rem; }
.difficulty[data-level] .label { margin-bottom:0; }
.difficulty[data-level]::after {
  content: attr(data-level);
  font-size:.78rem; font-weight:600; padding:.1rem .55rem;
  border-radius:999px; background:var(--paper-2); color:var(--graphite);
}
.difficulty[data-level="Easy"]::after     { color:var(--tick-text); background:var(--tick-bg); }
.difficulty[data-level="Hard"]::after     { color:var(--cross-text); background:var(--cross-bg); }

.concept-notes, .explanation-text { line-height:1.6; }

.common-mistakes ul, .options-analysis ul {
  list-style:none; margin-top:.4rem;
}
.common-mistakes li, .options-analysis li {
  position:relative; padding:.35rem 0 .35rem 1.1rem; line-height:1.5;
}
.common-mistakes li::before {
  content:"–"; position:absolute; left:0; color:var(--pencil);
}
.options-analysis li { border-top:1px solid var(--hairline); padding-top:.6rem; margin-top:.2rem; }
.options-analysis li:first-child { border-top:0; margin-top:0; }
.options-analysis strong { font-weight:600; color:var(--ink); margin-right:.35rem; }

.mnemonic {
  font-family:var(--serif); font-style:italic; color:var(--ink);
}
.mnemonic .label { font-family:var(--sans); font-style:normal; }

/* dark mode: same rules apply via variables, no overrides needed */
.answer[hidden] { display:none; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:2.6rem; padding:.55rem 1.1rem; border-radius:var(--r);
  font-weight:500; font-size:.95rem; text-decoration:none;
  border:1px solid var(--ink);
  transition: background .15s, color .15s;
}
.btn-ink   { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--graphite); border-color: var(--graphite); }
.btn-quiet { background: transparent; color: var(--ink); }
.btn-quiet:hover { background: var(--paper-2); }

/* ---------- pager / related ---------- */
.post-nav { margin-top:2rem; border-top:1px solid var(--hairline); padding-top:1.25rem; }
.pager { display:flex; justify-content:space-between; gap:.75rem; }
.related { margin-top:2rem; }
.related h2, .index-title, .mastery-summary + h2, .mastery-table + h2 { font-family:var(--serif); font-weight:500; font-size:1.35rem; margin-bottom:.75rem; }
.related ul { list-style:none; }
.related li { border-top:1px solid var(--hairline); }
.related a { display:block; padding:.6rem 0; text-decoration:none; }
.related a:hover { color: var(--pencil); }

/* ---------- results ---------- */
#results-container { display:none; margin-top:2rem; }
.results {
  border: 1.5px solid var(--ink); border-radius: var(--r);
  padding: 1.5rem clamp(1rem,4vw,2rem);
}
.results h2 { font-family:var(--serif); font-weight:400; font-size:clamp(3rem,10vw,4.5rem); line-height:1; letter-spacing:-.02em; margin-bottom:.5rem; }
.results h2 small { font-size:.4em; color:var(--pencil); letter-spacing:0; margin-left:.35rem; }
.results .verdict { font-family:var(--serif); font-size:1.15rem; color:var(--graphite); margin-bottom:.9rem; max-width:34ch; }
.results-meta { font-size:.85rem; color:var(--pencil); display:flex; gap:1.25rem; flex-wrap:wrap; padding-bottom:1rem; border-bottom:1px solid var(--hairline); font-variant-numeric:tabular-nums; }
.results-meta b { color:var(--ink); font-weight:500; }
.review { margin:1rem 0 1.25rem; }
.review li { list-style:none; display:flex; gap:.6rem; padding:.45rem 0; border-top:1px solid var(--hairline); font-size:.92rem; }
.review .i { margin-top:.2rem; }
.review .ok    .i { color:var(--tick); }
.review .bad   .i { color:var(--cross); }
.review .shown .i { color:var(--pencil); }
.review .shown span { color:var(--pencil); }

/* legend dims once a question has only been peeked at, not answered */
.mcq[data-revealed="true"] .qtext { color: var(--pencil); }
.results-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem; }
.badges { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 0; }
.badge { font-size:.8rem; padding:.2rem .6rem; border:1px solid var(--hairline); border-radius:999px; color:var(--graphite); }

/* ---------- CTA (one per page, after results) ---------- */
.cta {
  margin-top:3rem; padding:1.25rem 0; border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}
.cta-title { font-family:var(--serif); font-size:1.1rem; }
.cta-sub { font-size:.88rem; color:var(--pencil); }
.cta-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ---------- achievement / toast ---------- */
#achievement-popup, .toast {
  position:fixed; left:50%; bottom:1.25rem; transform:translate(-50%, 120%);
  background:var(--ink); color:var(--paper);
  padding:.65rem 1rem; border-radius:var(--r); font-size:.9rem;
  z-index:150; max-width:min(90vw, 26rem); text-align:center;
  transition: transform .3s var(--ease);
}
#achievement-popup.show, .toast.show { transform:translate(-50%, 0); }
#achievement-popup:empty { display:none; }

/* ---------- index / home ---------- */
.hero { padding:1.25rem 0 2.25rem; }
.hero-sheet { display:flex; gap:.9rem; margin-bottom:1.5rem; }
.hb { width:1.65rem; height:1.65rem; border-radius:50%; border:1.5px solid var(--graphite); position:relative; }
.hb.filled { background: var(--graphite); }
.hb.stamped { background: var(--tick); border-color: var(--tick); }
.hb.stamped::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--tick); opacity:.35; }
@media (prefers-reduced-motion: no-preference) {
  .hb.filled  { animation: heroFill  .5s var(--ease) .6s both; }
  .hb.stamped { animation: heroStamp .5s var(--ease) 1.2s both; }
  @keyframes heroFill  { from { background: transparent; } }
  @keyframes heroStamp { from { background: transparent; border-color: var(--graphite); transform: scale(1.15); } }
}
.hero h1 { font-family:var(--serif); font-weight:500; font-size:clamp(2rem,6vw,3rem); line-height:1.1; letter-spacing:-.015em; max-width:22ch; }
.hero p { margin-top:.75rem; color:var(--graphite); max-width:48ch; }

.daily { border:1.5px solid var(--saffron); border-radius:var(--r); padding:1.1rem 1.25rem; margin-bottom:2rem; }
.daily-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; color:var(--saffron); }
.daily-head h2 { font-family:var(--serif); font-weight:500; font-size:1.2rem; color:var(--ink); }
.daily-streak { margin-left:auto; display:inline-flex; gap:.25rem; align-items:center; font-size:.85rem; font-weight:600; }
#daily-title { font-size:1.05rem; margin-bottom:.9rem; }
.daily .btn-ink { background:var(--saffron); border-color:var(--saffron); color:#fff; }

.index-list { list-style:none; border-top:1px solid var(--hairline); }
.index-list li { border-bottom:1px solid var(--hairline); }
.index-list a { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; text-decoration:none; }
.index-list a:hover { padding-left:.35rem; transition: padding .15s var(--ease); }
.index-list .meta { font-size:.8rem; color:var(--pencil); font-variant-numeric:tabular-nums; }
.index-list .empty { padding:.85rem 0; color:var(--pencil); }

/* ---------- mastery ---------- */
.lede { color:var(--pencil); margin:-.25rem 0 1.5rem; font-size:.92rem; }
.mastery-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1rem 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); margin-bottom:2rem; }
.mastery-summary div { display:flex; flex-direction:column; }
.mastery-summary .big { font-family:var(--serif); font-size:2rem; line-height:1; }
.mastery-summary div span:last-child { font-size:.8rem; color:var(--pencil); }
.mastery-table { width:100%; border-collapse:collapse; margin-bottom:2rem; font-size:.95rem; }
.mastery-table th { text-align:left; padding-right:1rem; font-weight:500; color:var(--pencil); font-size:.8rem; padding:.4rem 0; border-bottom:1px solid var(--hairline); }
.mastery-table td { padding:.6rem 1rem .6rem 0; }
.mastery-table td:first-child { white-space:normal; }
.mastery-table td:not(:first-child) { white-space:nowrap; }
.mastery-table td:last-child { display:none; }
.mastery-table th:last-child { display:none; }
.mastery-table td.x { padding:.6rem 1rem .6rem 0; border-bottom:1px solid var(--hairline); vertical-align:middle; }
.mastery-table .empty { color:var(--pencil); }
.acc { display:inline-block; width:4rem; height:6px; background:var(--paper-2); vertical-align:middle; margin-right:.5rem; }
.acc i { display:block; height:100%; background:var(--ink); }
.acc.low i { background: var(--cross); }
.acc.high i { background: var(--tick); }

/* ---------- footer ---------- */
.site-footer { border-top:1px solid var(--hairline); padding:1.5rem clamp(1rem,4vw,2rem); font-size:.85rem; color:var(--pencil); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }
.site-footer nav { display:flex; gap:1rem; }
.site-footer a { text-decoration:none; }
.site-footer a:hover { color:var(--ink); }

/* ---------- confetti (used once, on 100%) ---------- */
@keyframes confettiFall { to { transform: translateY(100vh) rotate(720deg); opacity:0; } }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .header-nav a span, .header-nav a[target] { display:none; }
  .brand { font-size:1.05rem; }
  .sticky-bar { gap:.6rem; font-size:.8rem; }
  .mcq legend { font-size:1.08rem; }
  .pager { flex-direction:column; }
  .pager .btn { width:100%; }
  .cta .btn { flex:1; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior:auto !important; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .sticky-bar, .search, .reveal, .post-nav, .related, .cta, #results-container, .site-footer, #achievement-popup, .toast { display:none !important; }
  .answer[hidden] { display:block !important; }
  .option.correct .bubble::before { content:"✓"; }
  body { background:#fff; color:#000; font-size:11pt; }
  .mcq { break-inside: avoid; }
}




/* ============================================================
   ANSWER META — practice page
   Difficulty + Exam Relevance as compact pills in one row.
   Overrides the shared bordered-block rule further up.
   ============================================================ */

/* 1. Remove the shared "bordered paragraph" treatment */
.exam-relevance,
.difficulty {
  margin-top: .5rem;
  padding-top: 0;
  border-top: 0;
  font-size: .78rem;
}

/* 2. Difficulty pill — keep the existing ::after mechanism */
.difficulty[data-level] {
  display: inline-flex;
  align-items: center;
  margin: .5rem .35rem 0 0;
}
.difficulty[data-level] .label {
  display: inline;
  font-size: .72rem;
  margin: 0 .3rem 0 0;
  color: var(--pencil);
}

/* 3. Exam Relevance — one pill for the whole line */
.exam-relevance {
  display: inline-block;
  font-weight: 600;
  padding: .1rem .6rem;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--graphite);
  margin: .5rem .35rem 0 0;
}
.exam-relevance .label {
  display: inline;
  font-size: inherit;
  margin: 0 .25rem 0 0;
  color: inherit;
}

/* 4. Moderate pill — your sheet only had Easy/Hard */
.difficulty[data-level="Moderate"]::after {
  color: #8A5300;
  background: #FFF4E5;
}
[data-theme="dark"] .difficulty[data-level="Moderate"]::after {
  color: #F0BB66;
  background: #3A2C12;
}