/* CCA-F course — shared stylesheet. Tufte-inspired: readable, calm, prints well. */
:root{
  --ink:#1a1a1a; --soft:#555; --faint:#888;
  --bg:#fdfcf9; --panel:#f4f1ea; --rule:#e0dccf;
  --accent:#b5532a;      /* anthropic-ish clay */
  --accent2:#2a5db5;     /* link blue */
  --good:#2e7d32; --bad:#b3261e; --warn:#9a6b00;
  --code-bg:#f0ede4;
  --maxw:720px;
}
*{box-sizing:border-box}
html{font-size:18px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Georgia,"Iowan Old Style",Palatino,serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:3rem 1.4rem 6rem}
header.lesson{border-bottom:2px solid var(--ink); padding-bottom:1rem; margin-bottom:2rem}
.kicker{font-family:-apple-system,Segoe UI,Roboto,sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700}
h1{font-size:2rem; line-height:1.15; margin:.3rem 0 .4rem}
h2{font-size:1.3rem; margin:2.2rem 0 .6rem; border-bottom:1px solid var(--rule); padding-bottom:.25rem}
h3{font-size:1.05rem; margin:1.5rem 0 .4rem; font-family:-apple-system,Segoe UI,Roboto,sans-serif}
p,li{font-size:1.02rem}
.sub{color:var(--soft); font-style:italic; margin-top:0}
a{color:var(--accent2); text-decoration:none; border-bottom:1px solid rgba(42,93,181,.3)}
a:hover{border-bottom-color:var(--accent2)}
code{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:.86em; background:var(--code-bg); color:#8a3b1e; padding:.08em .35em; border-radius:3px}
/* keep inline code readable on dark panels: its background stays light, so force dark text */
.askbox code{background:#e9e4d6; color:#7a2e12}
pre{background:var(--code-bg); padding:1rem 1.1rem; border-radius:6px; overflow:auto; border:1px solid var(--rule)}
pre code{background:none; padding:0}
.lead{font-size:1.12rem; color:#333}

/* callouts */
.card{background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:1rem 1.2rem; margin:1.2rem 0}
.rule-box{border-left:4px solid var(--accent); background:#faf3ee}
.key{border-left:4px solid var(--accent2); background:#eef3fb}
.warn{border-left:4px solid var(--warn); background:#fbf6e9}
.card .label{font-family:-apple-system,Segoe UI,Roboto,sans-serif; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--faint); display:block; margin-bottom:.3rem}

/* trap table: distractor archetypes */
table{border-collapse:collapse; width:100%; margin:1.2rem 0; font-size:.95rem}
th,td{text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-family:-apple-system,Segoe UI,Roboto,sans-serif; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint)}
.tag{display:inline-block; font-family:-apple-system,Segoe UI,Roboto,sans-serif; font-size:.66rem; font-weight:700; padding:.12em .5em; border-radius:99px; letter-spacing:.04em; text-transform:uppercase}
.tag.right{background:#e3f1e4; color:var(--good)} .tag.wrong{background:#f7e3e1; color:var(--bad)}

/* quiz widget */
.quiz{border:1px solid var(--rule); border-radius:8px; margin:1.4rem 0; overflow:hidden}
.quiz .q{background:var(--panel); padding:.9rem 1.1rem; font-weight:bold; font-family:-apple-system,Segoe UI,Roboto,sans-serif; font-size:.98rem}
.quiz .opts{list-style:none; margin:0; padding:.4rem}
.quiz .opts li{margin:.3rem; padding:.7rem .9rem; border:1px solid var(--rule); border-radius:6px; cursor:pointer; font-family:-apple-system,Segoe UI,Roboto,sans-serif; font-size:.95rem; background:#fff; transition:.12s}
.quiz .opts li:hover{border-color:var(--accent2)}
.quiz .opts li.correct{background:#e3f1e4; border-color:var(--good)}
.quiz .opts li.incorrect{background:#f7e3e1; border-color:var(--bad)}
.quiz .explain{display:none; padding:.9rem 1.1rem; border-top:1px solid var(--rule); background:#fff; font-size:.95rem}
.quiz .explain.show{display:block}
.quiz .explain b{color:var(--accent)}

footer.lesson{margin-top:3rem; padding-top:1rem; border-top:2px solid var(--ink); font-family:-apple-system,Segoe UI,Roboto,sans-serif; font-size:.9rem; color:var(--soft)}
.nav{display:flex; gap:1rem; flex-wrap:wrap; margin-top:.6rem}
.askbox{background:#1a1a1a; color:#f4f1ea; border-radius:8px; padding:1rem 1.2rem; font-family:-apple-system,Segoe UI,Roboto,sans-serif; font-size:.92rem; margin:2rem 0 0}
.askbox b{color:#fff}
.progress{font-family:-apple-system,Segoe UI,Roboto,sans-serif; font-size:.75rem; color:var(--faint); letter-spacing:.05em}
@media print{ body{background:#fff} .quiz .explain{display:block} a{border:none; color:#000} }

/* ---- shared prev/next lesson navigation (injected by nav.js) ---- */
body.has-lessonnav .wrap{padding-bottom:6rem}
.lessonnav{position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:.5rem; align-items:stretch; justify-content:space-between;
  padding:.5rem; background:rgba(253,252,249,.97); backdrop-filter:blur(6px);
  border-top:1px solid var(--rule); box-shadow:0 -2px 12px rgba(0,0,0,.06);
  font-family:-apple-system,Segoe UI,Roboto,sans-serif}
.lessonnav a{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:.05rem;
  padding:.45rem .8rem; border:1px solid var(--rule); border-radius:9px; background:#fff;
  text-decoration:none; transition:.12s}
.lessonnav a:hover{border-color:var(--accent2); background:#f7faff}
.lessonnav .lnav-next{align-items:flex-end; text-align:right}
.lessonnav .lnav-home{flex:0 0 auto; max-width:8.5rem; align-items:center; text-align:center; background:var(--panel)}
.lnav-dir{font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--faint)}
.lnav-lbl{font-size:.84rem; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.lnav-empty{flex:1 1 0}
@media print{ .lessonnav{display:none} body.has-lessonnav .wrap{padding-bottom:0} }
@media (max-width:640px){ .lnav-lbl{font-size:.72rem} .lessonnav .lnav-home{max-width:4.5rem} .lnav-home .lnav-lbl{font-size:.62rem} }