/* ────────────────────────────────────────────────────────────────
   Quiz UI — shared by /quizzes (the hub) and /quizzes1 … /quizzes14
   (the per-lecture pages, one QR code each). Loaded together with
   editorial.css, which handles colour/border/font globally (brutal
   skin: monospace, hard edges, grayscale + one accent); this file
   only adds layout and the quiz-specific interaction states that
   editorial.css has no selectors for.
   ──────────────────────────────────────────────────────────────── */

/* editorial.css forces color:inherit !important on div/span/button/etc
   (its "no element may hard-code its own text colour" rule) so every
   colour below on one of those tags needs !important right back, or it
   silently never applies — that's what made hover text unreadable and
   the answer states less distinct than intended. */
:root{ --qz-good:#2e7d4f; --qz-good-ink:#fafafa; --qz-bad:#ad3a2c; --qz-bad-ink:#fafafa; }

.wrap{ max-width:720px; margin:0 auto; padding:6.5rem 1.5rem 5rem; }

.page-header{ margin-bottom:1.6rem; }
.eyebrow{ font-size:.68rem; letter-spacing:.24em; margin-bottom:1rem; }
h1{ font-size:clamp(1.9rem,6vw,2.7rem); line-height:1.08; margin-bottom:1rem; }
.head-sub{ font-size:.95rem; line-height:1.7; max-width:560px; }
.attrib{ display:block; margin-top:.6rem; font-size:.78rem; line-height:1.6; }

/* ── score bar + progress ─────────────────────────────────────────── */
.qz-scorebar{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  margin-top:2.2rem; padding:.9rem 1.1rem; border:1px solid var(--b-line2);
  border-bottom:none; font-size:.82rem; }
.qz-scorebar b{ font-weight:700; }
.qz-scorebar .btn{ margin-left:auto; font-size:.66rem; padding:.4rem .8rem;
  letter-spacing:.08em; cursor:pointer; }

.qz-progress{ height:8px; border:1px solid var(--b-line2); border-top:none;
  background:none; margin-bottom:2.2rem; }
.qz-progress-fill{ height:100%; width:0%; background:var(--b-acc); }

/* ── Factory Lab entry point: a standalone banner, not just another row
   in the list below — thick accent border, its own headline size and a
   description line, so it reads as its own destination on the page
   instead of blending into the lecture picker. "card" still gives it
   the sitewide hover-invert; .lab-cta.card beats editorial.css's
   .card{border:1px...!important} by being the more specific selector. ── */
.lab-cta.card{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  padding:1.7rem 1.7rem 1.6rem; margin-bottom:2rem; text-decoration:none;
  border:2px solid var(--b-acc) !important; }
.lab-cta-num{ font-size:.72rem; letter-spacing:.18em; font-weight:700;
  color:var(--b-acc) !important; }
.lab-cta-title{ font-size:1.3rem; font-weight:700; text-transform:uppercase; }
.lab-cta-desc{ font-size:.88rem; line-height:1.5; max-width:480px;
  color:var(--b-muted) !important; }
.lab-cta-arr{ align-self:flex-end; font-size:1.4rem; margin-top:-.4rem; }

/* ── lecture picker (/quizzes only): one row per lecture, links out
   to /quizzesN. "card" (added in the markup) gives the row its border
   and the sitewide hover-invert for free; this just lays it out. ──── */
#lec-select-list{ margin-top:2rem; display:flex; flex-direction:column; gap:.6rem; }
.lec-select{ display:flex; align-items:center; gap:1rem; padding:1rem 1.15rem;
  text-decoration:none; }
.lec-select-num{ font-size:.66rem; letter-spacing:.1em; flex-shrink:0; white-space:nowrap; }
.lec-select-num, .lec-select-count{ color:var(--b-faint) !important; }
.lec-select-title{ font-size:.88rem; font-weight:700; flex:1; text-transform:uppercase; }
.lec-select-count{ font-size:.72rem; flex-shrink:0; }
.lec-select-videos{ display:block; margin-top:.3rem; font-size:.7rem; font-weight:400; text-transform:none; color:var(--b-faint) !important; }
.lec-select-arr{ flex-shrink:0; }
.lec-select-done{ flex-shrink:0; font-size:.72rem; font-weight:700; white-space:nowrap;
  color:var(--qz-good) !important; }
.lec-select:hover .lec-select-done{ color:inherit !important; }

/* ── quiz cards: shared by the hub and every /quizzesN page ──────── */
#quiz-root{ margin-top:2rem; display:flex; flex-direction:column; gap:1.1rem; }
.lec-label{ font-size:.68rem; letter-spacing:.14em; margin-bottom:.6rem; }
.lec-label{ color:var(--b-faint) !important; }

.quiz-card{ border:1px solid var(--b-line2); padding:1.1rem 1.1rem 1.2rem; }
.quiz-tag{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.6rem; }
.quiz-tag{ color:var(--b-faint) !important; }
.quiz-q{ font-size:.95rem; line-height:1.5; margin-bottom:1rem; font-weight:700; }

/* bonus questions (mine, not from the lecture deck): flagged with an
   accent rule down the side instead of a separate badge. */
.quiz-card.bonus{ border-left:3px solid var(--b-acc); }
.quiz-card.bonus .quiz-tag{ color:var(--b-acc) !important; }

.quiz-svg{ margin:0 0 1.1rem; border:1px solid var(--b-line2); padding:.9rem; }
.quiz-svg svg{ display:block; width:100%; height:auto; max-width:340px; margin:0 auto; }

/* the Wyndor "factory planner" widget — drag the sliders, the point
   and the feasibility readout follow. Same green/red as the answers. */
.wyndor-marker{ fill:var(--qz-good); stroke:var(--b-bg); stroke-width:2px; }
.wyndor-marker.bad{ fill:var(--qz-bad); }
.wyndor-controls{ max-width:340px; margin:.7rem auto 0; display:flex;
  flex-direction:column; gap:.4rem; }
.wyndor-row{ display:flex; align-items:center; gap:.6rem; }
.wyndor-label{ font-size:.8rem; font-weight:700; flex-shrink:0; width:1.2rem; }
.wyndor-row input[type=range]{ flex:1; }
.wyndor-readout{ font-size:.78rem; color:var(--qz-good) !important; text-align:center;
  margin-top:.2rem; }
.wyndor-readout.bad{ color:var(--qz-bad) !important; }

.quiz-opts{ display:flex; flex-direction:column; gap:.55rem; }
.opt{ display:flex; align-items:flex-start; gap:.75rem; width:100%;
  text-align:left; background:none; border:2px solid var(--b-ink);
  padding:.65rem .8rem; cursor:pointer; font-family:inherit; color:inherit; }
/* the descendant "*" is the fix: editorial.css forces color:inherit
   !important on every div/span/button, so setting .opt's own color is
   not enough — every child has to be told the same colour directly, or
   it silently keeps inheriting the page's normal ink instead (this is
   what made hovered and answered options unreadable). */
.opt:hover{ background:var(--b-ink); }
.opt:hover, .opt:hover *{ color:var(--b-bg) !important; }
.opt-letter{ flex-shrink:0; width:1.4rem; height:1.4rem; border:1px solid currentColor;
  display:grid; place-items:center; font-size:.72rem; font-weight:700; text-transform:uppercase; }
.opt-main{ flex:1; }
.opt-text{ font-size:.87rem; line-height:1.5; }
.opt-explain{ display:none; font-size:.8rem; line-height:1.55; margin-top:.4rem; }

/* once answered, options stop reacting to the mouse at all — otherwise
   a stray hover would still try to invert a green/red block. */
.quiz-card.answered .opt{ cursor:default; pointer-events:none; }
.quiz-card.answered .opt-explain{ display:block; }

/* correct answer: green, with a check — always shown once answered,
   whichever one it is. */
.quiz-card.answered .opt[data-correct="true"]{
  background:var(--qz-good) !important; border-color:var(--qz-good) !important;
}
.quiz-card.answered .opt[data-correct="true"],
.quiz-card.answered .opt[data-correct="true"] *{ color:var(--qz-good-ink) !important; }
.quiz-card.answered .opt[data-correct="true"] .opt-text::after{ content:' \2713'; font-weight:700; }

/* the option actually picked, when wrong: red, with a cross. */
.quiz-card.answered .opt[data-correct="false"].picked{
  background:var(--qz-bad) !important; border-color:var(--qz-bad) !important;
}
.quiz-card.answered .opt[data-correct="false"].picked,
.quiz-card.answered .opt[data-correct="false"].picked *{ color:var(--qz-bad-ink) !important; }
.quiz-card.answered .opt[data-correct="false"].picked .opt-text::after{ content:' \2717'; font-weight:700; }

/* the two untouched distractors: fade back. */
.quiz-card.answered .opt[data-correct="false"]:not(.picked){ border-color:var(--b-line2) !important; }
.quiz-card.answered .opt[data-correct="false"]:not(.picked),
.quiz-card.answered .opt[data-correct="false"]:not(.picked) *{ color:var(--b-faint) !important; }

/* completion banner: appears once every question on the page is
   answered. Green for a clean sweep, the sitewide accent otherwise. */
.qz-done{ display:none; margin-top:1.4rem; padding:1rem 1.15rem;
  background:var(--b-b2); font-weight:700; font-size:.9rem; text-align:center; }
.qz-done, .qz-done *{ color:var(--b-b2-ink) !important; }
.qz-done.show{ display:block; }
.qz-done.perfect{ background:var(--qz-good) !important; }
.qz-done.perfect, .qz-done.perfect *{ color:var(--qz-good-ink) !important; }

@media(max-width:560px){
  .wrap{ padding:5.6rem 1.1rem 4rem; }
  .lec-select-title{ font-size:.8rem; }
  .lec-select-count{ display:none; }
}