/* Shared stylesheet for all BJCP /teach lessons and reference cards.
   Tufte-inspired: readable serif body, generous margins, prints cleanly.
   Dark by default (2026-07-26: evening reading; the paper-white burned).
   Print still renders light – see the @media print block at the bottom. */

:root {
  --ink: #e6e1d8;
  --muted: #9b948a;
  --rule: #3a352e;
  --paper: #191714;      /* page background */
  --surface: #211e1a;    /* callouts, quiz cards */
  --surface-2: #262119;  /* aim block, quiz buttons */
  --amber: #d98b3a;      /* Märzen amber, lifted for dark bg */
  --gold: #e0b23c;       /* Festbier gold */
  --good: #79c48a;
  --bad: #e58185;
  --accent: #d9b48c;
  --maxw: 40rem;         /* ~78 chars at 18px; 46rem ran ~92, past the comfortable measure */
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
  margin: 0 auto;
  max-width: var(--maxw);
  padding: 3rem 1.6rem 6rem;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.eyebrow {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

h1 { font-size: 2rem; line-height: 1.1; margin: 0 0 0.6rem; }
h2 {
  font-size: 1.28rem;
  margin: 2.4rem 0 0.6rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule);
}
h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }

p, li { font-size: 1rem; }
a { color: var(--accent); text-decoration: underline solid 1px; text-underline-offset: 2px; }

.lede { font-size: 1.12rem; color: #cdc7bd; }

.aim {
  border-left: 3px solid var(--amber);
  background: var(--surface-2);
  padding: 0.8rem 1.1rem;
  margin: 1.4rem 0;
  font-size: 1.05rem;
}

blockquote {
  margin: 1.2rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--rule);
  color: #d6d0c6;
  font-style: italic;
}
blockquote cite { display: block; font-style: normal; font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }

.callout {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
}
.callout.run { border-left: 4px solid var(--good); }
.callout.trap { border-left: 4px solid var(--bad); }

table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

.amber { color: var(--amber); font-weight: 600; }
.gold  { color: var(--gold);  font-weight: 600; }
.good  { color: var(--good); }
.bad   { color: var(--bad); }

mark { background: rgba(224, 178, 60, 0.26); color: inherit; padding: 0 0.15em; }

/* Free-recall widget (component: assets/quiz.js .reveal handler).
   Replaced the multiple-choice .quiz on 2026-07-26: in 17 of 19 blocks the correct
   option was the longest one, so the widget trained option-length matching instead
   of retrieval – and MCQ trains recognition while the exam scores production. */
.recall { border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.2rem; margin: 1.4rem 0; background: var(--surface); }
.recall .q { font-weight: 600; margin: 0 0 0.4rem; }
.recall .cue { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.78rem; color: var(--muted); margin: 0 0 0.8rem; }
.recall .model { margin: 0 0 0.5rem; padding-left: 0.8rem; border-left: 3px solid var(--good); }
.recall .why { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* Legacy multiple-choice widget – kept so any un-migrated block still renders */
.quiz { border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.2rem; margin: 1.4rem 0; background: var(--surface); }
.quiz .q { font-weight: 600; margin: 0 0 0.7rem; }
.quiz button {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 0.95rem;
  margin: 0.35rem 0; padding: 0.55rem 0.75rem;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.quiz button:hover { border-color: var(--accent); }
.quiz button.correct { background: rgba(121, 196, 138, 0.16); border-color: var(--good); }
.quiz button.wrong   { background: rgba(229, 129, 133, 0.16); border-color: var(--bad); }
.quiz .feedback { margin-top: 0.6rem; font-size: 0.9rem; min-height: 1.2rem; }
.quiz .feedback.show-correct { color: var(--good); }
.quiz .feedback.show-wrong   { color: var(--bad); }

.reveal { font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--accent); background: none; border: none; padding: 0; text-decoration: underline; }
.reveal-body { display: none; margin-top: 0.6rem; }
.reveal-body.open { display: block; }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.85rem; color: var(--muted); }
.nav { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.82rem; }
.nav a { margin-right: 1rem; }

@media print {
  :root {
    --ink: #1a1a1a;
    --muted: #6b6b6b;
    --rule: #d8d2c4;
    --paper: #fff;
    --surface: #fff;
    --surface-2: #faf6ee;
    --amber: #b5651d;
    --gold: #a37a00;
    --good: #2e6e3f;
    --bad: #9b2226;
    --accent: #5a3e2b;
  }
  body { background: #fff; color: var(--ink); max-width: 100%; padding: 0; font-size: 11pt; }
  .lede { color: #333; }
  blockquote { color: #2c2c2c; }
  .quiz, .callout { background: #fff; }
  .quiz button, .reveal { display: none; }
  .reveal-body { display: block; }
  mark { background: #fdf0c8; }
  a { color: var(--ink); text-decoration: none; }
}