/* ParaPrep, MCQ Bank (Brief 7) page styles.
   Reuses the design tokens + base components from styles.css (incl. the quiz
   card / .option / .explain / .progress-wrap from the prototype quiz). Only
   adds what filters, the performance panel, weak-area surfacing, the session
   chrome and gating need. Shared chrome (gate / demo-bar / footer-rich / stat /
   chip) is redefined here so mcq.html only links styles.css + mcq.css, exactly
   as tracks.html links styles.css + tracks.css. */

/* ---- Shared footer (matches tracks.css / landing.css) ---- */
.footer-rich {
  max-width: 1000px; margin: 0 auto; padding: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  color: var(--muted); font-size: .8rem;
}
.footer-rich a { color: var(--muted); }
.footer-rich a:hover { color: var(--teal-dark); }
.footer-rich .legal-links { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---- Demo dev bar (only shown in demo mode) ---- */
.demo-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #eef5f4; border: 1px dashed var(--teal); color: var(--teal-dark);
  border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: 1.5rem; font-size: .82rem;
}
.demo-bar strong { font-weight: 700; }
.demo-bar .spacer { margin-left: auto; }
.btn.tiny { padding: .35rem .7rem; font-size: .8rem; }

/* ---- Upgrade prompt (paid gate) ---- */
.gate {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff; border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow);
}
.gate .lock { font-size: 2rem; }
.gate h2 { margin: .4rem 0 .5rem; font-size: 1.6rem; }
.gate p { margin: 0 0 1.2rem; opacity: .95; max-width: 60ch; }
.gate .gate-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn.on-teal { background: #fff; color: var(--teal-dark); }
.btn.on-teal:hover { background: #eef3ff; }
.btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.gate ul.preview { margin: 1.3rem 0 0; padding: 0 0 0 1.1rem; opacity: .95; font-size: .92rem; }
.gate ul.preview li { margin: .25rem 0; }

/* ---- Chips + stat tiles (match tracks.css) ---- */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 0; }
.chip { background: var(--teal-soft); color: var(--teal-dark); font-size: .76rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
.chip.level { background: var(--teal-dark); color: #fff; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); }
.stat .num { font-size: 1.5rem; font-weight: 800; color: var(--teal-dark); line-height: 1.1; }
.stat .lbl { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---- Performance panel ---- */
.perf-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; }
.perf-panel h3 { margin: 0 0 .9rem; font-size: 1.05rem; }
.perf-empty { color: var(--muted); font-size: .9rem; margin: 0; }

/* per-topic accuracy rows */
.topic-rows { display: grid; gap: .55rem; margin-top: 1rem; }
.topic-row { display: grid; grid-template-columns: minmax(0,1.4fr) 2fr auto; align-items: center; gap: .8rem; }
.topic-row .t-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic-row .t-bar { height: 9px; background: var(--line); border-radius: 999px; overflow: hidden; }
.topic-row .t-bar > span { display: block; height: 100%; background: var(--green); }
.topic-row.weak .t-bar > span { background: var(--amber); }
.topic-row .t-val { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.topic-row .t-val b { color: var(--ink); }

/* ---- Weak-area shortcut ---- */
.weak-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between;
  background: var(--amber-bg); border: 1px solid #f0e3c4; border-left: 4px solid var(--amber);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.weak-card .weak-copy strong { display: block; color: var(--amber); font-size: 1.02rem; }
.weak-card .weak-copy p { margin: .25rem 0 0; color: var(--muted); font-size: .88rem; }
.weak-card .weak-copy .chips { margin-top: .5rem; }
.btn.amber { background: var(--amber); white-space: nowrap; flex-shrink: 0; }
.btn.amber:hover { background: var(--amber); filter: brightness(.95); }

/* ---- Filters ---- */
.section-head { font-size: 1.15rem; margin: 1.8rem 0 .6rem; letter-spacing: -.01em; }
.mcq-filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); max-width: 760px; }
.mcq-filters .field-row { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-end; }
.field label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: .3rem; }
.field select {
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 9px; font-size: .95rem; background: #fff; min-width: 170px; color: var(--ink);
}
.field select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.option:focus-visible, .btn:focus-visible, .main-nav a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.filters-readout { font-size: .9rem; color: var(--muted); margin: 1rem 0 0; }
.filters-readout strong { color: var(--teal-dark); }
.filters-error { color: var(--red); font-size: .88rem; margin: .4rem 0 0; min-height: 1.1em; }
.filters-actions { margin-top: 1.1rem; display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---- Session chrome (wraps the reused .quiz-card) ---- */
.session-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.session-top .spacer { margin-left: auto; }
.session-meta { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.session-meta b { color: var(--teal-dark); }

/* difficulty / level badges on the question */
.q-badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.badge { display: inline-block; font-size: .68rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.badge.topic { background: var(--teal-soft); color: var(--teal-dark); }
.badge.lvl { background: var(--teal-dark); color: #fff; }
/* Advanced Paramedic-only content, amber, echoing the CPG "AP" clinical-level flag. */
.badge.lvl.ap { background: #f5a623; color: #3a2c00; }
.badge.diff-easy { background: #e6f5ec; color: var(--green); }
.badge.diff-med  { background: var(--amber-bg); color: var(--amber); }
.badge.diff-hard { background: #fbe9e7; color: var(--red); }
.badge.redbox { background: #fbe9e7; color: var(--red); }

/* ---- Red-box filter toggle (practise just the CPG caution boxes) ---- */
.redbox-toggle { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .1rem 0 .2rem; font-size: .85rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.redbox-toggle input { width: 1rem; height: 1rem; accent-color: var(--red); cursor: pointer; }
.redbox-toggle .redbox-hint { font-weight: 400; color: var(--muted); font-size: .8rem; }

/* feedback line in the explanation block */
.explain .verdict { font-weight: 800; }
.explain .verdict.right { color: var(--green); }
.explain .verdict.wrong { color: var(--red); }
.explain .explain-source { display: inline-block; margin-top: .5rem; font-size: .82rem; color: var(--muted, #667); font-style: italic; }

.session-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem; align-items: center; }
.session-actions .spacer { margin-left: auto; }
.btn.link { background: none; border: 0; color: var(--muted); font-weight: 600; padding: .4rem .2rem; cursor: pointer; font-size: .88rem; }
.btn.link:hover { color: var(--teal-dark); text-decoration: underline; }

/* ---- End-of-session summary ---- */
.summary-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); max-width: 680px; }
.summary-card .score-big { text-align: center; }
.summary-card .score-sub { text-align: center; color: var(--muted); margin: 0 0 1.2rem; }
.summary-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.3rem; }

@media (max-width: 620px) {
  .field select { min-width: 0; width: 100%; }
  .mcq-filters .field-row .field { flex: 1 1 100%; }
  .topic-row { grid-template-columns: minmax(0,1fr) auto; }
  .topic-row .t-bar { display: none; }
}