/* MinBase course stylesheet.
   Design rules: readable measure, serif body / sans headings, restrained colour.
   Colour is never the ONLY signal: every callout has a text label and an icon.
   Light + dark themes follow the OS setting; print-friendly. */

:root {
  --ink:#1c1c1c; --ink-soft:#3d3d3d; --muted:#666; --paper:#fdfdfb; --card:#fff; --hairline:#e3e0d8;
  --accent:#0e5a8a; --code-bg:#f4f3ec; --code-ink:#1c1c1c;
  --term-bg:#1c1c1c; --term-fg:#d8d8d0; --term-bar:#2a2a2a;
  --info-bg:#eef6fb;  --info-bd:#0e5a8a;
  --term-box-bg:#f1f0fa; --term-box-bd:#5b4bb7;
  --why-bg:#fdf6e3;   --why-bd:#a67c00;
  --watch-bg:#fdecea; --watch-bd:#b3261e;
  --try-bg:#eaf6ee;   --try-bd:#1a7f37;
  --predict-bg:#fff;  --predict-bd:#0e5a8a;
  --ok:#1a7f37; --bad:#b3261e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#e8e6df; --ink-soft:#cfccc3; --muted:#9a978f; --paper:#16171a; --card:#1e2024; --hairline:#34363b;
    --accent:#6cb6ee; --code-bg:#22252a; --code-ink:#e8e6df;
    --term-bg:#0d0e10; --term-fg:#d8d8d0; --term-bar:#202226;
    --info-bg:#14232e; --info-bd:#6cb6ee; --term-box-bg:#1d1b2e; --term-box-bd:#9d8df2;
    --why-bg:#2a2412; --why-bd:#d4a72c; --watch-bg:#2e1816; --watch-bd:#f0756c;
    --try-bg:#14261b; --try-bd:#52c97a; --predict-bg:#1e2024; --predict-bd:#6cb6ee;
    --ok:#52c97a; --bad:#f0756c;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper);
  font-family:"Charter","Georgia","Palatino Linotype","Book Antiqua",serif;
  font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased; }
main { max-width:44rem; margin:0 auto; padding:2.5rem 1.4rem 7rem; }

h1,h2,h3,h4,.sans { font-family:"Inter","Segoe UI","Helvetica Neue",Arial,sans-serif; }
h1 { font-size:2.2rem; line-height:1.15; margin:.5rem 0 .4rem; letter-spacing:-.015em; }
h2 { font-size:1.45rem; line-height:1.25; margin:3rem 0 .8rem; padding-bottom:.4rem; border-bottom:1px solid var(--hairline); }
h3 { font-size:1.12rem; margin:2rem 0 .3rem; }
p { margin:.9rem 0; }
li { margin:.35rem 0; }
a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.lede { font-size:1.2rem; color:var(--ink-soft); line-height:1.55; }
.muted { color:var(--muted); font-size:.92rem; }

/* lesson header */
.meta { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .5rem; padding:0; list-style:none; }
.meta li { margin:0; font-family:"Inter","Segoe UI",Arial,sans-serif; font-size:.78rem; font-weight:600;
  padding:.15rem .65rem; border-radius:999px; background:var(--code-bg); border:1px solid var(--hairline); color:var(--ink-soft); }
.meta li.meta--primary { background:var(--accent); color:var(--paper); border-color:var(--accent); }

/* objectives / prerequisites boxes */
.objectives { margin:1.6rem 0; padding:1.1rem 1.4rem; background:var(--card); border:1px solid var(--hairline); border-radius:10px; }
.objectives h2 { margin:0 0 .4rem; padding:0; border:0; font-size:1.05rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.objectives ul,.objectives ol { margin:.3rem 0; padding-left:1.3rem; }

/* contents */
.toc { font-family:"Inter","Segoe UI",Arial,sans-serif; font-size:.92rem; margin:1.5rem 0; }
.toc ol { margin:.3rem 0; padding-left:1.3rem; }

/* callouts */
.callout { margin:1.6rem 0; padding:1rem 1.3rem 1rem 1.3rem; border:2px solid var(--info-bd);
  border-left-width:8px; border-radius:8px; background:var(--info-bg); font-size:.98rem; line-height:1.6; }
.callout__label { display:block; margin-bottom:.4rem; font-family:"Inter","Segoe UI",Arial,sans-serif;
  font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.callout p:first-of-type { margin-top:0; }
.callout p:last-of-type { margin-bottom:0; }
.callout--keyidea { --c:var(--info-bd); background:var(--info-bg); border-color:var(--info-bd); font-size:1.08rem; }
.callout--keyidea .callout__label { color:var(--accent); }
.callout--newterm { background:var(--term-box-bg); border-color:var(--term-box-bd); }
.callout--newterm .callout__label { color:var(--term-box-bd); }
.callout--why { background:var(--why-bg); border-color:var(--why-bd); }
.callout--why .callout__label { color:var(--why-bd); }
.callout--watch { background:var(--watch-bg); border-color:var(--watch-bd); }
.callout--watch .callout__label { color:var(--watch-bd); }
.callout--try { background:var(--try-bg); border-color:var(--try-bd); }
.callout--try .callout__label { color:var(--try-bd); }
.callout--keyidea .callout__label::before { content:"★ "; }
.callout--newterm .callout__label::before { content:"✎ "; }
.callout--why .callout__label::before { content:"➜ "; }
.callout--watch .callout__label::before { content:"⚠ "; }
.callout--try .callout__label::before { content:"▶ "; }
.callout dl { margin:.3rem 0 0; }
.callout dt { font-weight:700; margin-top:.6rem; }
.callout dd { margin:.1rem 0 0 0; }

/* optional deep dives and predict blocks use <details> */
details.deepdive, details.predict { margin:1.5rem 0; border-radius:8px; background:var(--predict-bg); }
details.deepdive { border:1px dashed var(--why-bd); }
details.predict  { border:2px solid var(--predict-bd); }
details > summary { cursor:pointer; padding:.8rem 1.2rem; font-family:"Inter","Segoe UI",Arial,sans-serif; font-weight:700; font-size:.95rem; }
details.predict > summary::before { content:"? "; color:var(--accent); }
details.deepdive > summary::before { content:"+ "; color:var(--why-bd); }
details > .details__body { padding:0 1.3rem 1rem; font-size:.98rem; }
details > .details__body p:first-child { margin-top:.2rem; }

/* code */
code,pre,.terminal { font-family:"Cascadia Code","JetBrains Mono","SF Mono",Consolas,"Liberation Mono",monospace; font-size:.86rem; }
code { background:var(--code-bg); padding:.1rem .35rem; border-radius:4px; color:var(--code-ink); }
.codeblock { margin:1.2rem 0; background:var(--code-bg); border:1px solid var(--hairline); border-radius:6px; overflow:hidden; }
.codeblock__title { display:block; padding:.4rem 1.1rem; font-family:"Inter","Segoe UI",Arial,sans-serif; font-size:.74rem;
  font-weight:700; color:var(--muted); background:var(--hairline); letter-spacing:.03em; }
.codeblock pre { margin:0; padding:.9rem 1.1rem; overflow-x:auto; line-height:1.5; color:var(--code-ink); }
.codeblock .hl { background:rgba(214,167,44,.28); display:inline-block; width:100%; }
.codeblock .cm { color:var(--muted); font-style:italic; }
.codeblock .added { background:rgba(26,127,55,.18); display:inline-block; width:100%; }

/* static terminal */
.terminal { margin:1.2rem 0; background:var(--term-bg); color:var(--term-fg); border-radius:6px; overflow:hidden; }
.terminal__bar { padding:.45rem .9rem; background:var(--term-bar); font-family:"Inter","Segoe UI",Arial,sans-serif; font-size:.72rem; color:#aaa; }
.terminal pre { margin:0; padding:.9rem 1.1rem; overflow-x:auto; line-height:1.5; }
.terminal .p { color:#5fd77a; }
.terminal .dim { color:#8f8f8f; }
.terminal .err { color:#ff8a80; }
.figure-caption,figcaption { font-size:.88rem; color:var(--muted); line-height:1.5; }
.terminal + figcaption, .cast + figcaption { margin-top:-.7rem; margin-bottom:1.2rem; }
.cast { margin:1.2rem 0; width:100%; }

/* diagrams */
.diagram { margin:1.6rem 0; padding:1rem; background:var(--card); border:1px solid var(--hairline); border-radius:8px; text-align:center; }
.diagram .mermaid svg { max-width:100%; height:auto; }
.diagram figcaption { text-align:left; margin-top:.8rem; padding-top:.6rem; border-top:1px solid var(--hairline); }

/* tables */
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; margin:1.2rem 0; font-size:.95rem; line-height:1.5; }
th,td { text-align:left; vertical-align:top; padding:.55rem .7rem; border-bottom:1px solid var(--hairline); }
th { font-family:"Inter","Segoe UI",Arial,sans-serif; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }

/* steps */
ol.steps { list-style:none; counter-reset:s; padding:0; }
ol.steps > li { counter-increment:s; position:relative; padding-left:2.6rem; margin:1rem 0; }
ol.steps > li::before { content:counter(s); position:absolute; left:0; top:.05rem; width:1.9rem; height:1.9rem; line-height:1.9rem; text-align:center;
  border-radius:50%; background:var(--accent); color:var(--paper); font-family:"Inter","Segoe UI",Arial,sans-serif; font-weight:700; font-size:.85rem; }

/* quiz */
.quiz-score { font-family:"Inter","Segoe UI",Arial,sans-serif; font-weight:700; color:var(--accent); }
.quiz-q { margin:1.2rem 0; padding:1.1rem 1.2rem; border:1px solid var(--hairline); border-radius:8px; background:var(--card); }
.quiz-stem { font-weight:700; margin:0 0 .7rem; }
.quiz-opts { display:flex; flex-direction:column; gap:.45rem; }
.quiz-opt { text-align:left; padding:.55rem .85rem; border:1px solid var(--hairline); border-radius:6px; background:var(--card); font:inherit; font-size:.95rem; color:var(--ink); cursor:pointer; }
.quiz-opt:hover:not(:disabled) { border-color:var(--accent); }
.quiz-opt:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.quiz-opt:disabled { cursor:default; opacity:1; }
.quiz-opt.is-correct { border:2px solid var(--ok); font-weight:700; }
.quiz-opt.is-wrong { border:2px solid var(--bad); }
.quiz-opt .mark { font-weight:800; margin-right:.4rem; }
.quiz-explain { margin-top:.8rem; padding-left:.8rem; border-left:3px solid var(--hairline); font-size:.94rem; color:var(--ink-soft); }

/* recap, further reading, nav */
.recap { margin:2rem 0; padding:1.1rem 1.4rem; border:2px solid var(--accent); border-radius:10px; background:var(--card); }
.recap h2 { margin-top:0; border:0; padding:0; }
.further { list-style:none; padding:0; }
.further li { padding-left:1.4rem; position:relative; }
.further li::before { content:"↗"; position:absolute; left:0; color:var(--accent); }
.next { margin-top:3rem; padding:1rem 1.2rem; border:1px dashed var(--hairline); border-radius:8px; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:"Inter","Segoe UI",Arial,sans-serif; }
.next a.btn { font-weight:700; }
.footnotes { margin-top:3rem; padding-top:1rem; border-top:1px solid var(--hairline); font-size:.85rem; color:var(--muted); }

@media print {
  body { font-size:12px; background:#fff; color:#000; } main { max-width:none; padding:0; }
  .terminal { background:#fff; color:#000; border:1px solid #999; } .cast { display:none; }
}