/* Ultimate QC — the learning section: the hub's module cards and the
   self-check questions. Colour tokens live ONLY in theme.css (GR-16);
   link that first. Shared by every /learn page so a module added later
   looks like the ones already there. */

/* ---------------------------------------------------------------- hub */
.modules { display:grid; gap:14px; margin-top:18px;
      grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
.module { display:block; color:inherit; background:var(--panel);
      border:1px solid var(--edge); border-radius:10px; padding:16px 18px;
      position:relative; }
.module:hover { border-color:var(--accent-dim); text-decoration:none; }
.module .n { font-family:"IBM Plex Mono",monospace; font-size:10.5px;
      color:var(--accent); letter-spacing:.2em; }
.module h3 { font-size:16px; margin:4px 0 6px; letter-spacing:-.01em;
      color:var(--ink); }
.module p { font-size:12.5px; color:var(--muted); margin:0; }
.module .meta { margin-top:10px; font-family:"IBM Plex Mono",monospace;
      font-size:10.5px; color:var(--notrun); letter-spacing:.06em; }
.module.soon { opacity:.55; }

/* ------------------------------------------------------------ questions */
/* The whole quiz works with JavaScript OFF: every answer is in the page,
   revealed by CSS only once the question is opened. That keeps it
   readable, printable and indexable — and the page's CSP is
   script-src 'self', so nothing here may be inline anyway. */
.quiz { margin-top:8px; }
.quiz .intro { color:var(--muted); font-size:13.5px; max-width:44em; }
.quiz ol.qs { list-style:none; margin:18px 0 0; padding:0;
      counter-reset:qn; }
.quiz li.q { counter-increment:qn; background:var(--panel);
      border:1px solid var(--edge); border-radius:10px;
      padding:14px 16px 14px 52px; margin:10px 0; position:relative; }
.quiz li.q::before { content:counter(qn); position:absolute; left:16px;
      top:14px; font-family:"IBM Plex Mono",monospace; font-size:13px;
      font-weight:700; color:var(--accent); }
.quiz .ask { color:var(--ink); font-size:14px; margin:0; }
.quiz .tag { font-family:"IBM Plex Mono",monospace; font-size:9.5px;
      letter-spacing:.16em; text-transform:uppercase; color:var(--notrun);
      margin-left:8px; white-space:nowrap; }
.quiz .tag.vhard { color:var(--warn); }
.quiz ul.opts { list-style:none; margin:10px 0 0; padding:0; }
.quiz ul.opts li { border:1px solid var(--edge); border-radius:7px;
      padding:7px 11px; margin:5px 0; font-size:13px; color:var(--muted);
      cursor:pointer; background:var(--panel2); }
.quiz ul.opts li:hover { border-color:var(--accent-dim); color:var(--ink); }
.quiz ul.opts li.picked { border-color:var(--accent); color:var(--ink); }
.quiz ul.opts li.right { border-color:var(--pass); color:var(--pass); }
.quiz ul.opts li.wrong { border-color:var(--fail); color:var(--fail); }
.quiz .reveal { margin-top:10px; font:inherit; font-size:12px;
      font-weight:600; padding:4px 12px; border-radius:6px;
      border:1px solid var(--edge); background:var(--panel2);
      color:var(--muted); cursor:pointer; }
.quiz .reveal:hover { color:var(--ink); border-color:var(--accent); }

/* answers are present in the markup and simply not shown until asked for */
.quiz .ans { display:none; margin-top:12px; padding-top:11px;
      border-top:1px solid var(--edge); }
.quiz li.q.open .ans { display:block; }
.quiz li.q.open .reveal { display:none; }
.quiz .ans p { font-size:13px; margin:0 0 7px; }
.quiz .ans .lab { font-family:"IBM Plex Mono",monospace; font-size:10px;
      letter-spacing:.14em; text-transform:uppercase; display:block;
      margin-bottom:2px; }
.quiz .ans .correct .lab { color:var(--pass); }
.quiz .ans .trap .lab { color:var(--warn); }
.quiz .ans .work { font-family:"IBM Plex Mono",Consolas,monospace;
      font-size:11.5px; color:var(--muted); background:var(--panel2);
      border:1px solid var(--edge); border-radius:6px; padding:8px 10px;
      margin:6px 0 8px; overflow-x:auto; white-space:pre-wrap; }
.quiz .score { margin-top:14px; font-family:"IBM Plex Mono",monospace;
      font-size:12px; color:var(--muted); }
.quiz .score b { color:var(--ink); }

/* ----------------------------------------------------------- worked box */
.worked { border:1px solid var(--edge); border-left:3px solid var(--accent);
      border-radius:8px; background:var(--panel); padding:12px 16px;
      margin:14px 0; }
.worked .h { font-family:"IBM Plex Mono",monospace; font-size:10px;
      letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
      margin-bottom:6px; }
.worked p { font-size:13px; margin:0 0 6px; }
.worked .calc { font-family:"IBM Plex Mono",Consolas,monospace;
      font-size:12px; color:var(--ink); background:var(--panel2);
      border-radius:6px; padding:8px 10px; margin:6px 0;
      overflow-x:auto; white-space:pre-wrap; }
.worked .res { font-family:"IBM Plex Mono",monospace; font-size:13px;
      font-weight:700; color:var(--pass); }

@media (max-width:600px) {
  .quiz li.q { padding:12px 13px 12px 42px; }
  .quiz li.q::before { left:13px; }
}