/* ============================================================
   Spring Certified Professional — shared course stylesheet
   One system for every lesson & reference doc. Print-friendly,
   light/dark aware, Tufte-inspired reading measure.
   ============================================================ */

:root {
  --green:      #6db33f;   /* Spring brand green */
  --green-deep: #4a8a26;
  --ink:        #1a1a1a;
  --ink-soft:   #444;
  --ink-faint:  #6b6b6b;
  --paper:      #fdfdfb;
  --paper-2:    #f4f4ef;
  --rule:       #e2e2da;
  --link:       #2b6cb0;
  --code-bg:    #f5f5f0;
  --warn-bg:    #fff7e6;
  --warn-bd:    #e0b34d;
  --tip-bg:     #eef7e6;
  --tip-bd:     var(--green);
  --gotcha-bg:  #fdecec;
  --gotcha-bd:  #d9534f;
  --measure:    42rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #e7e7e2;
    --ink-soft:  #c3c3bc;
    --ink-faint: #9a9a92;
    --paper:     #16171a;
    --paper-2:   #1e1f23;
    --rule:      #33343a;
    --link:      #7fb3ea;
    --code-bg:   #22242a;
    --warn-bg:   #2c2617;
    --warn-bd:   #b8912f;
    --tip-bg:    #1c2a16;
    --gotcha-bg: #2c1a1a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 1.12rem;
  margin: 0;
  padding: 3rem 1.4rem 6rem;
}

.wrap { max-width: var(--measure); margin: 0 auto; }
.wrap-wide { max-width: 52rem; margin: 0 auto; }

/* ---- Headings ---- */
h1, h2, h3, .kicker, nav, .pill, .btn, table, .quiz {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1 { font-size: 2.05rem; line-height: 1.15; margin: 0 0 .3rem; letter-spacing: -.02em; }
h2 { font-size: 1.4rem; margin: 2.6rem 0 .6rem; padding-top: .4rem; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; margin: 1.8rem 0 .4rem; color: var(--ink-soft); }

.kicker {
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
  font-weight: 700; color: var(--green-deep); margin-bottom: .5rem;
}
@media (prefers-color-scheme: dark) { .kicker { color: var(--green); } }

.subtitle { color: var(--ink-faint); font-size: 1.05rem; margin: .2rem 0 1.6rem; font-style: italic; }

hr { border: none; border-top: 1px solid var(--rule); margin: 2.4rem 0; }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: currentColor; }

p { margin: .8rem 0; }
strong { font-weight: 700; }

/* ---- Code ---- */
code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: .86em; background: var(--code-bg); padding: .12em .4em;
  border-radius: 4px; border: 1px solid var(--rule);
}
pre {
  background: var(--code-bg); border: 1px solid var(--rule); border-left: 3px solid var(--green);
  border-radius: 6px; padding: 1rem 1.1rem; overflow-x: auto; font-size: .9rem; line-height: 1.5;
}
pre code { background: none; border: none; padding: 0; font-size: inherit; }
.tok-key { color: #a626a4; } .tok-ann { color: var(--green-deep); font-weight: 600; }
.tok-str { color: #50a14f; } .tok-com { color: var(--ink-faint); font-style: italic; }
@media (prefers-color-scheme: dark) {
  .tok-key { color: #c586c0; } .tok-ann { color: var(--green); } .tok-str { color: #98c379; }
}

/* ---- Callouts ---- */
.note, .exam-tip, .gotcha, .why {
  border-left: 4px solid var(--rule); background: var(--paper-2);
  padding: .85rem 1.1rem; margin: 1.3rem 0; border-radius: 0 6px 6px 0; font-size: 1rem;
}
.note strong, .exam-tip strong, .gotcha strong, .why strong { display: block; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem;
  font-family: -apple-system, sans-serif; }
.exam-tip { background: var(--tip-bg); border-left-color: var(--tip-bd); }
.exam-tip strong { color: var(--green-deep); }
.gotcha { background: var(--gotcha-bg); border-left-color: var(--gotcha-bd); }
.gotcha strong { color: var(--gotcha-bd); }
.why { background: var(--warn-bg); border-left-color: var(--warn-bd); }
.why strong { color: #a5761a; }
@media (prefers-color-scheme: dark) { .exam-tip strong { color: var(--green); } .why strong { color: var(--warn-bd);} }

/* ---- Tables ---- */
table { border-collapse: collapse; width: 100%; margin: 1.3rem 0; font-size: .95rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
tbody tr:hover { background: var(--paper-2); }
.table-scroll { overflow-x: auto; }

/* ---- Pills / tags ---- */
.pill { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .18em .6em; border-radius: 999px; background: var(--paper-2);
  border: 1px solid var(--rule); color: var(--ink-soft); }
.pill-green { background: var(--tip-bg); border-color: var(--tip-bd); color: var(--green-deep); }
@media (prefers-color-scheme: dark) { .pill-green { color: var(--green); } }

/* ---- Nav bar ---- */
.topnav { max-width: var(--measure); margin: 0 auto 2rem; display: flex; gap: 1.2rem;
  flex-wrap: wrap; font-size: .82rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.topnav a { color: var(--ink-faint); }
.topnav a:hover { color: var(--link); }

/* ---- Lesson footer ---- */
.lesson-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule); font-size: .95rem; }
.ask-teacher { background: var(--tip-bg); border: 1px dashed var(--tip-bd); border-radius: 8px;
  padding: 1rem 1.2rem; margin: 2.4rem 0 0; font-size: 1rem; }
.ask-teacher strong { color: var(--green-deep); }
@media (prefers-color-scheme: dark) { .ask-teacher strong { color: var(--green); } }

/* ---- Primary-source box ---- */
.source-box { border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.2rem;
  margin: 1.6rem 0; background: var(--paper-2); }
.source-box .kicker { margin-bottom: .3rem; }

/* ---- Buttons ---- */
.btn { display: inline-block; background: var(--green); color: #fff; padding: .5rem 1rem;
  border-radius: 6px; font-weight: 600; font-size: .9rem; border: none; cursor: pointer; }
.btn:hover { background: var(--green-deep); border-bottom-color: transparent; }

/* ---- Checklist ---- */
ul.check { list-style: none; padding-left: 0; }
ul.check li { padding-left: 1.7rem; position: relative; margin: .4rem 0; }
ul.check li::before { content: "▢"; position: absolute; left: 0; color: var(--green); font-size: 1.1rem; }

/* ---- Quiz widget ---- */
.quiz { margin: 1.8rem 0; }
.quiz-score { position: sticky; top: 0; background: var(--paper); z-index: 5;
  font-size: .85rem; color: var(--ink-faint); padding: .5rem 0; border-bottom: 1px solid var(--rule);
  margin-bottom: 1.2rem; }
.quiz-score strong { color: var(--green-deep); font-size: 1rem; }
@media (prefers-color-scheme: dark) { .quiz-score strong { color: var(--green); } }
.quiz-card { border: 1px solid var(--rule); border-radius: 10px; padding: 1.1rem 1.2rem;
  margin: 1rem 0; background: var(--paper-2); }
.quiz-q { font-weight: 600; margin-bottom: .9rem; line-height: 1.45; }
.quiz-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem;
  height: 1.6rem; background: var(--green); color: #fff; border-radius: 50%; font-size: .8rem;
  margin-right: .6rem; vertical-align: middle; }
.quiz-multi { font-size: .75rem; color: var(--ink-faint); font-weight: 500; }
.quiz-opts { display: flex; flex-direction: column; gap: .5rem; }
.quiz-opt { text-align: left; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 8px; padding: .6rem .8rem; font-size: .95rem; cursor: pointer; color: var(--ink);
  transition: border-color .12s, background .12s; display: flex; align-items: baseline; gap: .6rem; }
.quiz-opt:hover:not(:disabled) { border-color: var(--green); }
.quiz-opt:disabled { cursor: default; }
.quiz-letter { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem;
  height: 1.4rem; border-radius: 5px; background: var(--code-bg); border: 1px solid var(--rule);
  font-size: .75rem; font-weight: 700; color: var(--ink-faint); flex-shrink: 0; }
.quiz-opt.picked { border-color: var(--green); background: var(--tip-bg); }
.quiz-opt.is-correct { border-color: var(--green); background: var(--tip-bg); }
.quiz-opt.is-correct .quiz-letter { background: var(--green); color: #fff; }
.quiz-opt.is-wrong { border-color: var(--gotcha-bd); background: var(--gotcha-bg); }
.quiz-opt.is-wrong .quiz-letter { background: var(--gotcha-bd); color: #fff; }
.quiz-actions { margin-top: .8rem; }
.quiz-feedback { display: none; margin-top: .9rem; padding: .8rem 1rem; border-radius: 8px; font-size: .95rem; }
.quiz-feedback.show { display: block; }
.quiz-feedback.ok { background: var(--tip-bg); border: 1px solid var(--tip-bd); }
.quiz-feedback.no { background: var(--gotcha-bg); border: 1px solid var(--gotcha-bd); }
.quiz-verdict { font-weight: 700; font-family: -apple-system, sans-serif; margin-bottom: .3rem; }
.quiz-feedback.ok .quiz-verdict { color: var(--green-deep); }
.quiz-feedback.no .quiz-verdict { color: var(--gotcha-bd); }
.quiz-why { font-family: "Iowan Old Style", Georgia, serif; line-height: 1.5; }
@media (prefers-color-scheme: dark) { .quiz-feedback.ok .quiz-verdict { color: var(--green); } }

/* print */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
  .topnav, .lesson-nav, .ask-teacher, .quiz-reveal-all { display: none; }
  a { color: #000; border: none; }
  pre, .note, .exam-tip, .gotcha { break-inside: avoid; }
}