/* ============================================================
   theme-drill.css — the Verbalize Drill as a training console.

   VISUAL ONLY. Nothing here touches drill.js, the DOM structure, or
   any of the ids it depends on:
     autoChoices choices counts filter got meta mic micNote missed
     opts reveal score stem transcript
   All styling hangs off those existing hooks.

   Loads after app.css + theme-space.css.
   ============================================================ */

body.drill {
  background:
    linear-gradient(90deg,
      rgba(2, 8, 18, .62) 0%,
      rgba(2, 8, 18, .42) 48%,
      rgba(2, 8, 18, .28) 100%),
    url("/img/console-bg.jpg") center center / cover no-repeat fixed,
    #020812;
}

body.drill main {
  max-width: 1230px;
  padding: 34px 28px 60px;
}

/* ---------- head ---------- */
body.drill .page-title { font-size: clamp(2.3rem, 3.8vw, 3rem); font-weight: 780; }
body.drill .page-sub {
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  color: #C3CDDA;
  max-width: 78ch;
  margin-bottom: 1.75rem;
}
body.drill .page-sub strong { color: #F5F8FF; font-weight: 680; }

/* ---------- topic filter ---------- */
body.drill #filter {
  height: 48px;
  width: 300px;
  max-width: 100%;
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(3, 14, 29, .72);
  border: 1px solid rgba(105, 165, 255, .55);
  color: #F5F8FF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.drill #filter:focus {
  outline: none;
  border-color: #72A7FF;
  box-shadow:
    0 0 0 2px rgba(90, 145, 255, .10),
    0 0 20px rgba(70, 130, 255, .10);
}
body.drill #filter option { background: #061426; color: #F5F8FF; }

/* ---------- HUD status cards ---------- */
body.drill #counts {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 1.5rem;
}
body.drill #counts .stat {
  position: relative;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem 1.4rem;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(7, 24, 45, .82),
    rgba(3, 13, 27, .65));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(100, 165, 255, .45);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}
body.drill #counts .num {
  font-size: clamp(2.1rem, 2.9vw, 2.6rem);
  font-weight: 750;
  color: #F5F8FF;
}
body.drill #counts .lbl {
  font-size: 13px;
  letter-spacing: .04em;
  color: #C1CCDA;
}
/* first two read blue; the third carries a restrained green edge only */
body.drill #counts .stat:nth-child(1) .num,
body.drill #counts .stat:nth-child(2) .num { color: #82ADFF; }
body.drill #counts .stat:nth-child(3) {
  border-color: rgba(98, 212, 155, .42);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, .24),
    0 0 20px rgba(98, 212, 155, .10),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}
body.drill #counts .stat:nth-child(3) .num { color: #62D49B; }

/* icons, drawn in CSS — no library added */
body.drill #counts .stat::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(120, 170, 240, .34);
  background-color: rgba(70, 130, 255, .10);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
}
body.drill #counts .stat:nth-child(1)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382ADFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
}
body.drill #counts .stat:nth-child(2)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382ADFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5 5.5 12 5.5 22.5 12 22.5 12 19 18.5 12 18.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
body.drill #counts .stat:nth-child(3)::after {
  border-color: rgba(98, 212, 155, .40);
  background-color: rgba(98, 212, 155, .10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362D49B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
}

/* ---------- the question console ---------- */
body.drill main > .card:first-of-type {
  background: linear-gradient(135deg,
    rgba(7, 28, 53, .88),
    rgba(3, 15, 31, .72));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(85, 160, 255, .60);
  border-radius: 15px;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, .30),
    0 0 28px rgba(50, 120, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 26px;
}
body.drill #meta { font-size: 14.5px; color: #9FC3F5; }
body.drill .drill-stem {
  font-size: clamp(1.32rem, 1.7vw, 1.5rem);
  font-weight: 660;
  color: #F5F8FF;
  line-height: 1.45;
  margin-bottom: 1.5rem;
}

/* ---------- actions ---------- */
body.drill .btn-row { gap: 12px; margin-top: 22px; }
body.drill #mic,
body.drill #choices,
body.drill #reveal,
body.drill #got,
body.drill #missed {
  height: 50px;
  padding: 0 20px;
  border-radius: 8px;
  transition: background .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
body.drill #mic:hover:not(:disabled),
body.drill #choices:hover:not(:disabled),
body.drill #reveal:hover:not(:disabled),
body.drill #got:hover, body.drill #missed:hover { transform: translateY(-1px); }

/* primary: speak */
body.drill #mic, body.drill #got {
  background: rgba(20, 18, 2, .45);
  border: 1px solid rgba(255, 215, 35, .72);
  color: #FFE22E;
  box-shadow: 0 0 18px rgba(255, 210, 30, .08);
}
body.drill #mic:hover:not(:disabled), body.drill #got:hover {
  background: rgba(255, 220, 40, .08);
  border-color: #FFE22E;
  box-shadow: 0 0 24px rgba(255, 210, 30, .16);
}
body.drill #mic[data-on="1"] {
  background: rgba(255, 220, 40, .12);
  border-color: #FFE22E;
  box-shadow: 0 0 26px rgba(255, 210, 30, .22);
}

/* secondary: choices + missed */
body.drill #choices, body.drill #missed {
  background: rgba(5, 20, 38, .62);
  border: 1px solid rgba(100, 165, 255, .55);
  color: #BBD5FF;
}
body.drill #choices:hover:not(:disabled), body.drill #missed:hover {
  border-color: #72A7FF;
  box-shadow: 0 0 20px rgba(70, 130, 255, .14);
}
body.drill #choices:disabled { opacity: .4; }

/* reveal: gold, but lighter than the mic */
body.drill #reveal.primary, body.drill #reveal {
  background: rgba(20, 18, 2, .42);
  border: 1px solid rgba(255, 210, 30, .58);
  color: #FFE22E;
}
body.drill #reveal:hover:not(:disabled) {
  background: rgba(255, 220, 40, .07);
  border-color: rgba(255, 210, 30, .85);
  box-shadow: 0 0 22px rgba(255, 210, 30, .14);
}

body.drill kbd {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .10);
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12px;
  opacity: 1 !important;
  color: inherit;
}

/* ---------- always-show-choices ---------- */
body.drill #autoChoices {
  width: 17px;
  height: 17px;
  accent-color: #FFE22E;
}

/* ---------- transcript console ---------- */
body.drill .transcript {
  background: rgba(0, 7, 17, .42);
  border: 1px solid rgba(100, 160, 220, .42);
  border-radius: 8px;
  min-height: 52px;
  color: #AEBBCB;
}
body.drill .transcript.live { border-color: #72A7FF; color: #F5F8FF; }

/* ---------- options ---------- */
body.drill .opt {
  background: rgba(0, 7, 17, .40);
  border: 1px solid rgba(100, 160, 220, .30);
  border-radius: 8px;
  padding: 14px 16px;
}
body.drill .revealed .opt[data-correct="true"] {
  border-color: rgba(98, 212, 155, .65);
  background: rgba(98, 212, 155, .10);
}
body.drill .revealed .opt[data-correct="true"] .mark { color: #62D49B; }
body.drill .opt .why { color: #AEBBCB; }

/* ---------- scoring panel ---------- */
body.drill main > section .card {
  background: linear-gradient(135deg,
    rgba(7, 22, 41, .80),
    rgba(3, 13, 27, .68));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(100, 165, 255, .35);
  border-radius: 14px;
  padding: 24px;
}
body.drill main > section .card h3 { font-size: 1.45rem; color: #fff; }
body.drill main > section .card p { font-size: 16px; color: #D0D8E3; line-height: 1.6; }

/* ---------- footer ---------- */
body.drill .footer {
  border-top: 1px solid rgba(100, 160, 220, .25);
  font-size: 13.5px;
  color: #9CAABD;
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  body.drill #counts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  body.drill {
    background:
      linear-gradient(rgba(2, 8, 18, .74), rgba(2, 8, 18, .84)),
      url("/img/console-bg-mobile.jpg") center top / cover no-repeat scroll,
      #020812;
  }
  body.drill main { padding: 22px 17px 50px; }
  body.drill .page-title { font-size: 2.15rem; }
  body.drill #counts { grid-template-columns: 1fr; }
  body.drill #counts .stat { min-height: 92px; }
  body.drill #filter { width: 100%; }
  body.drill .btn-row { width: 100%; }
  body.drill .btn-row .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- forced colors ---------- */
@media (forced-colors: active) {
  body.drill, body.drill #counts .stat, body.drill .card,
  body.drill .opt, body.drill .transcript, body.drill #filter,
  body.drill .btn, body.drill kbd { forced-color-adjust: none; }
  body.drill {
    background:
      linear-gradient(90deg,
        rgba(2, 8, 18, .66) 0%, rgba(2, 8, 18, .46) 48%, rgba(2, 8, 18, .32) 100%),
      url("/img/console-bg.jpg") center center / cover no-repeat fixed,
      #020812 !important;
  }
  body.drill #counts .stat,
  body.drill .card {
    background: linear-gradient(135deg,
      rgba(7, 26, 49, .90), rgba(3, 14, 29, .76)) !important;
    border: 1px solid rgba(110, 170, 255, .5) !important;
  }
  body.drill #counts .stat:nth-child(3) { border-color: rgba(98, 212, 155, .5) !important; }
  body.drill .drill-stem, body.drill .page-title { color: #F5F8FF !important; }
  body.drill #meta { color: #9FC3F5 !important; }
  body.drill #mic, body.drill #got, body.drill #reveal { color: #FFE22E !important; }
  body.drill #choices, body.drill #missed { color: #BBD5FF !important; }
  @media (max-width: 680px) {
    body.drill {
      background:
        linear-gradient(rgba(2, 8, 18, .74), rgba(2, 8, 18, .84)),
        url("/img/console-bg-mobile.jpg") center top / cover no-repeat scroll,
        #020812 !important;
    }
  }
}

/* ============================================================
   ASSESSMENT PICKER · READING LINKS · MOCK TEST
   ============================================================ */

/* ---------- picker row ---------- */
body.drill .assess-pick {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
body.drill .assess-pick label {
  font-size: 14px;
  color: #AEBBCB;
  letter-spacing: .02em;
}
body.drill .assess-pick #filter { width: auto; min-width: 380px; max-width: 100%; }
body.drill #mockStart {
  background: rgba(20, 18, 2, .42);
  border: 1px solid rgba(255, 210, 30, .58);
  color: #FFE22E;
}
body.drill #mockStart:hover:not(:disabled) {
  background: rgba(255, 220, 40, .08);
  border-color: rgba(255, 210, 30, .85);
  box-shadow: 0 0 22px rgba(255, 210, 30, .14);
}

/* what this assessment covers */
body.drill .assess-info {
  display: flex;
  gap: 10px 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(3, 14, 29, .55);
  border: 1px solid rgba(105, 165, 255, .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.drill .ai-cover { font-size: 14.5px; color: #D6DFEA; }
body.drill .ai-read  { font-size: 13.5px; color: #9FC3F5; }
body.drill .assess-info .badge {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 205, 25, .65);
  background: rgba(25, 18, 0, .36);
  color: #FFE22E;
  font-size: 12.5px;
  font-weight: 650;
  margin-left: auto;
}
body.drill .assess-info .badge.danger {
  border-color: rgba(255, 53, 109, .65);
  background: rgba(35, 5, 14, .34);
  color: #FF7A9E;
}

/* ---------- the reading link ---------- */
body.drill #meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 14.5px !important;
  color: #9FC3F5 !important;
}
body.drill .readlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(105, 165, 255, .45);
  background: rgba(5, 20, 38, .55);
  color: #BBD5FF;
  font-size: 13px;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease;
}
body.drill .readlink::after {
  content: "";
  width: 13px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BBD5FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.drill .readlink:hover {
  border-color: #72A7FF;
  background: rgba(12, 34, 62, .7);
  text-decoration: none;
}

/* ---------- mock test ---------- */
body.drill .mock-only { display: none; }
body.drill.mock-on .mock-only { display: block; }
body.drill.mock-on #mockBar {
  margin-bottom: 18px;
  height: 5px;
  background: rgba(100, 160, 220, .14);
  border: 0;
}
body.drill.mock-on #mockBar > span { background: linear-gradient(90deg, #FFD22E, #FFE88A); }

/* during a mock the study controls are irrelevant */
body.drill.mock-on #mic,
body.drill.mock-on #choices,
body.drill.mock-on #reveal,
body.drill.mock-on #score,
body.drill.mock-on .transcript,
body.drill.mock-on #micNote,
body.drill.mock-on .assess-pick #mockStart,
body.drill.mock-on label:has(#autoChoices) { display: none; }

body.drill .opt-pick { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
body.drill .opt-pick:hover {
  border-color: rgba(120, 175, 255, .7);
  background: rgba(70, 130, 255, .08);
}

body.drill .mock-score { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 750; }
body.drill .mock-score.good { color: #62D49B; }
body.drill .mock-score.mid  { color: #FFE22E; }
body.drill .mock-score.low  { color: #FF7A9E; }

body.drill .mock-review { align-items: flex-start; }
body.drill .mock-q { font-weight: 620; color: #EAF1FF; margin-bottom: 6px; }
body.drill .mock-you { font-size: 14.5px; color: #AEBBCB; }
body.drill .mock-right { font-size: 14.5px; color: #62D49B; margin-top: 3px; }
body.drill .mock-review .readlink { margin-top: 10px; }
body.drill .revealed .opt.mock-review[data-correct="false"] {
  border-color: rgba(255, 122, 158, .45);
  background: rgba(35, 5, 14, .24);
  opacity: 1;
}
body.drill .revealed .opt.mock-review[data-correct="false"] .mark { color: #FF7A9E; }

@media (max-width: 680px) {
  body.drill .assess-pick #filter { min-width: 0; width: 100%; }
  body.drill #mockStart { width: 100%; justify-content: center; }
  body.drill .assess-info .badge { margin-left: 0; }
}

@media (forced-colors: active) {
  body.drill .assess-info, body.drill .readlink, body.drill .opt-pick,
  body.drill #mockBar, body.drill #mockBar > span { forced-color-adjust: none; }
  body.drill .assess-info {
    background: rgba(3, 14, 29, .7) !important;
    border: 1px solid rgba(110, 170, 255, .45) !important;
  }
  body.drill .readlink { color: #BBD5FF !important; border-color: rgba(110,170,255,.55) !important; }
  body.drill .ai-cover { color: #D6DFEA !important; }
  body.drill .ai-read  { color: #9FC3F5 !important; }
  body.drill .mock-score.good { color: #62D49B !important; }
  body.drill .mock-score.mid  { color: #FFE22E !important; }
  body.drill .mock-score.low  { color: #FF7A9E !important; }
  body.drill .mock-right { color: #62D49B !important; }
}

/* ---------- "From the reading" ----------
   Appears under the revealed answer. The per-option .why says why an option is
   wrong; this says what the book actually taught, so a miss sends you back to
   the idea rather than to a one-line rebuttal. */
body.drill .reading {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(100, 165, 255, .32);
  border-left: 3px solid rgba(120, 180, 255, .75);
  background: linear-gradient(135deg,
    rgba(6, 20, 38, .72),
    rgba(3, 12, 25, .58));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.drill .reading-head {
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8FB6EE;
  margin-bottom: 9px;
}
body.drill .reading-sum {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #D0D8E3;
}
/* the one line that settles the question — held apart from the summary */
body.drill .reading-key {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(98, 212, 155, .6);
  font-size: 15px;
  line-height: 1.55;
  color: #BFEFD6;
}
body.drill .reading-link { margin-top: 13px; }

/* mock review shows the key point only, and only on a miss */
body.drill .mock-key {
  margin: 10px 0 0;
  font-size: 14px;
}

@media (forced-colors: active) {
  body.drill .reading,
  body.drill .reading-key { forced-color-adjust: none; }
  body.drill .reading {
    background: rgba(3, 14, 29, .72) !important;
    border: 1px solid rgba(110, 170, 255, .45) !important;
    border-left: 3px solid rgba(120, 180, 255, .8) !important;
  }
  body.drill .reading-head { color: #8FB6EE !important; }
  body.drill .reading-sum  { color: #D6DFEA !important; }
  body.drill .reading-key  {
    color: #9BE7C4 !important;
    border-left-color: rgba(98, 212, 155, .7) !important;
  }
}

/* ---------- code fences on a question ----------
   `Before` is part of the question: the broken code you are being asked about.
   `After` only appears once the answer is revealed. The two are colour-coded so the
   difference registers before you have read a word. */
body.drill .codefence {
  position: relative;
  margin: 16px 0 0;
  border-radius: 10px;
  border: 1px solid rgba(100, 165, 255, .3);
  background: rgba(2, 10, 22, .72);
  overflow: hidden;
}
body.drill .codefence-tag {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(100, 165, 255, .22);
}
body.drill .codefence pre {
  margin: 0;
  padding: 13px 14px;
  overflow-x: auto;
}
body.drill .codefence code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre;
  color: #D6E2F2;
}
/* before = the broken one, amber. after = the fix, green. */
body.drill .codefence.before { border-left: 3px solid rgba(255, 196, 80, .8); }
body.drill .codefence.before .codefence-tag { color: #FFC450; }
body.drill .codefence.after  { border-left: 3px solid rgba(98, 212, 155, .85); }
body.drill .codefence.after  .codefence-tag { color: #62D49B; }

@media (forced-colors: active) {
  body.drill .codefence { forced-color-adjust: none; }
  body.drill .codefence {
    background: rgba(2, 10, 22, .8) !important;
    border: 1px solid rgba(110, 170, 255, .45) !important;
  }
  body.drill .codefence code { color: #E2EAF5 !important; }
  body.drill .codefence.before { border-left: 3px solid #FFC450 !important; }
  body.drill .codefence.after  { border-left: 3px solid #62D49B !important; }
  body.drill .codefence.before .codefence-tag { color: #FFC450 !important; }
  body.drill .codefence.after  .codefence-tag { color: #62D49B !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   READABILITY — larger type through the whole drill.
   Appended last so it wins on equal specificity. Sizes are in rem where they
   should scale with the browser's own font setting, and px only for the
   supporting labels that should stay quiet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the question itself */
body.drill .drill-stem {
  font-size: clamp(1.55rem, 2.1vw, 1.95rem);
  line-height: 1.5;
}

/* answer options — the text you read most */
body.drill .opt {
  font-size: 1.18rem;
  line-height: 1.6;
  padding: 16px 18px;
}
body.drill .opt .mark { font-size: 1.1rem; }

/* per-option explanation: smaller than the option, but not small */
body.drill .opt .why {
  font-size: 1.02rem;
  line-height: 1.6;
  margin-top: 6px;
}

/* "From the reading" */
body.drill .reading      { padding: 20px 22px; }
body.drill .reading-head { font-size: 13px; }
body.drill .reading-sum  { font-size: 1.12rem; line-height: 1.72; }
body.drill .reading-key  { font-size: 1.12rem; line-height: 1.62; margin-top: 14px; }

/* code fences — monospace reads small, so it needs the most help */
body.drill .codefence code    { font-size: 1.02rem; line-height: 1.75; }
body.drill .codefence-tag     { font-size: 12px; }

/* mock review */
body.drill .mock-q     { font-size: 1.12rem; line-height: 1.55; }
body.drill .mock-you   { font-size: 1.02rem; }
body.drill .mock-right { font-size: 1.02rem; }

/* The section/chapter line above the question.
   !important is needed only because an earlier rule already used it (line ~399). */
body.drill #meta { font-size: 16px !important; }

/* On a phone the stem can dominate the screen; ease it back a little. */
@media (max-width: 680px) {
  body.drill .drill-stem { font-size: clamp(1.35rem, 5.4vw, 1.6rem); }
  body.drill .opt        { font-size: 1.1rem; }
  body.drill .codefence code { font-size: .96rem; }
}

/* ============================================================
   FLASHCARDS (study mode)
   One card: the question and choices on the front, the answer on the back.
   It turns edge-on, swaps content, and turns back — so the card is always
   exactly as tall as what is on it, and the answer lands where the question was.
   ============================================================ */
body.drill [hidden] { display: none !important; }
body.drill.mock-on .study-only { display: none !important; }

/* ---------- counter, tallies, progress ---------- */
body.drill .fc-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 18px;
  margin: 6px 0 10px;
}
body.drill .fc-count { font-size: 1.15rem; font-weight: 720; color: #F5F8FF; letter-spacing: .01em; }
body.drill .fc-tally { display: flex; gap: 16px; font-size: 14.5px; font-weight: 620; }
body.drill .fc-know  { color: #62D49B; }
body.drill .fc-learn { color: #FF9DB8; }
body.drill .fc-bar {
  height: 5px;
  margin-bottom: 18px;
  background: rgba(100, 160, 220, .14);
  border: 0;
}
body.drill .fc-bar > span { background: linear-gradient(90deg, #62D49B, #9BE7C4); transition: width .25s ease; }

/* ---------- the card ---------- */
body.drill .fc {
  position: relative;
  background: linear-gradient(135deg, rgba(7, 28, 53, .90), rgba(3, 15, 31, .76));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(85, 160, 255, .60);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 30px 28px 24px;
  min-height: 300px;
  cursor: pointer;
  outline: none;
  transform: perspective(1600px) rotateY(0deg);
  transition: transform .17s ease-in;
  scroll-margin-top: 92px;          /* clears the sticky site header */
}
body.drill .fc.turning { transform: perspective(1600px) rotateY(90deg); }
body.drill .fc.is-back .fc-side { color: #9BE7C4; }
body.drill .fc.is-back {
  cursor: pointer;
  border-color: rgba(98, 212, 155, .55);
}
body.drill .fc-side {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6F8FB8;
}
body.drill .fc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 14px;
  color: #9FC3F5;
  margin-bottom: 14px;
}
body.drill .fc-stem {
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  font-weight: 660;
  line-height: 1.45;
  color: #F5F8FF;
  margin-bottom: 18px;
  white-space: pre-wrap;
}
body.drill .fc-stem-back { font-size: 1.05rem; font-weight: 560; color: #C9D6E8; margin-bottom: 14px; }
body.drill .fc-multi { font-size: 14px; color: #FFE22E; margin-bottom: 10px; }

/* ---------- choices on the front ---------- */
body.drill .fc-choices { display: grid; gap: 10px; }
body.drill .fc-choice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: #E4ECF7;
  background: rgba(0, 7, 17, .42);
  border: 1px solid rgba(100, 160, 220, .34);
  border-radius: 10px;
  padding: 13px 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
body.drill .fc-choice:hover,
body.drill .fc-choice:focus-visible {
  border-color: rgba(120, 175, 255, .8);
  background: rgba(70, 130, 255, .09);
  outline: none;
}
body.drill .fc-choice.sel {
  border-color: #FFE22E;
  background: rgba(255, 220, 40, .08);
}
body.drill .fc-choice .mark {
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #BBD5FF;
  background: rgba(100, 160, 220, .16);
}
body.drill .fc-hint { margin: 16px 0 0; font-size: 13.5px; color: #8EA6C6; }

/* ---------- the back ---------- */
body.drill .fc-verdict { font-size: 1.5rem; font-weight: 760; margin-bottom: 10px; }
body.drill .fc-verdict.ok { color: #62D49B; }
body.drill .fc-verdict.no { color: #FF7A9E; }
body.drill .fc-verdict.self { font-size: 1.1rem; font-weight: 620; color: #FFE22E; }
body.drill .fc-answers { display: grid; gap: 8px; }
body.drill .fc-opt { opacity: .62; }
body.drill .fc-opt[data-correct="true"],
body.drill .fc-opt[data-picked="true"] { opacity: 1; }
body.drill .revealed .fc-opt[data-picked="true"][data-correct="false"] {
  border-color: rgba(255, 122, 158, .55);
  background: rgba(35, 5, 14, .30);
}
body.drill .fc-opt[data-picked="true"][data-correct="false"] .mark { color: #FF7A9E; }
body.drill .fc-said { margin: 14px 0 0; font-size: 14.5px; color: #AEBBCB; font-style: italic; }

/* ---------- buttons under the card ---------- */
body.drill .fc-actions .btn {
  height: 50px;
  padding: 0 20px;
  border-radius: 8px;
  background: rgba(5, 20, 38, .62);
  border: 1px solid rgba(100, 165, 255, .55);
  color: #BBD5FF;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
body.drill .fc-actions .btn:hover { transform: translateY(-1px); border-color: #72A7FF; }
body.drill #flip, body.drill #check, body.drill #next {
  background: rgba(20, 18, 2, .45);
  border-color: rgba(255, 215, 35, .72);
  color: #FFE22E;
}
body.drill #know  { border-color: rgba(98, 212, 155, .7); color: #62D49B; }
body.drill #turn  { border-color: rgba(160, 190, 255, .75); color: #DCE7FF; }
body.drill .fc-choice.review { cursor: pointer; opacity: .85; }
body.drill #learn { border-color: rgba(255, 122, 158, .6); color: #FF9DB8; }
body.drill .fc-note { font-size: 13.5px; color: #8EA6C6; margin-top: 10px; }
body.drill #fcScene .transcript:empty { display: none; }
body.drill #fcScene .transcript { margin-top: 12px; padding: 12px 14px; }

/* ---------- end of round ---------- */
body.drill .fc-end { padding: 28px; scroll-margin-top: 92px; }
body.drill .fc-missed { color: #FFE22E; font-weight: 600; }
body.drill .fc-end-score { font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 760; margin-bottom: 16px; }
body.drill .fc-end-score.good { color: #62D49B; }
body.drill .fc-end-score.mid  { color: #FFE22E; }
body.drill .fc-end-score.low  { color: #FF7A9E; }
body.drill .fc-end-head { font-weight: 650; color: #EAF1FF; margin: 0 0 8px; }
body.drill .fc-end-list { margin: 0 0 8px; padding-left: 1.4rem; color: #D0D8E3; line-height: 1.55; }
body.drill .fc-end-list li { margin-bottom: 6px; }
body.drill .fc-end .btn { height: 48px; padding: 0 20px; }
body.drill #again { border-color: rgba(255, 122, 158, .6); color: #FF9DB8; }

@media (prefers-reduced-motion: reduce) {
  body.drill .fc, body.drill .fc-bar > span { transition: none; }
}
@media (max-width: 680px) {
  body.drill .fc { padding: 26px 16px 18px; min-height: 0; }
  body.drill .fc-stem { font-size: 1.2rem; }
  body.drill .fc-choice { font-size: 15px; padding: 12px 12px; }
  body.drill .fc-top { flex-direction: column; gap: 4px; }
}

@media (forced-colors: active) {
  body.drill .fc, body.drill .fc-choice, body.drill .fc-bar, body.drill .fc-bar > span,
  body.drill .fc-actions .btn, body.drill .fc-end .btn, body.drill .fc-choice .mark {
    forced-color-adjust: none;
  }
  body.drill .fc { background: rgba(3, 14, 29, .9) !important; border: 1px solid rgba(110, 170, 255, .6) !important; }
  body.drill .fc.is-back { border-color: rgba(98, 212, 155, .6) !important; }
  body.drill .fc-choice { background: rgba(0, 7, 17, .6) !important; border: 1px solid rgba(110, 170, 255, .45) !important; color: #E4ECF7 !important; }
  body.drill .fc-choice.sel { border-color: #FFE22E !important; }
  body.drill .fc-count, body.drill .fc-stem { color: #F5F8FF !important; }
  body.drill .fc-know, body.drill .fc-verdict.ok, body.drill .fc-end-score.good { color: #62D49B !important; }
  body.drill .fc-learn, body.drill .fc-verdict.no, body.drill .fc-end-score.low { color: #FF7A9E !important; }
  body.drill .fc-verdict.self, body.drill .fc-end-score.mid, body.drill #flip, body.drill #check, body.drill #next { color: #FFE22E !important; }
  body.drill .fc-bar { background: rgba(100, 160, 220, .2) !important; }
  body.drill .fc-bar > span { background: #62D49B !important; }
}