/* ===================================================================
   Chips & LLMs — Shared Course Stylesheet
   Tufte-inspired: wide margins, comfortable reading, high contrast
   =================================================================== */

:root {
  --text: #1a1a1a;
  --muted: #555;
  --faint: #888;
  --accent: #0047cc;
  --accent-light: #e8eeff;
  --warn: #b84c00;
  --warn-light: #fff3e8;
  --success: #1a6e2e;
  --success-light: #e6f4ea;
  --border: #ddd;
  --bg: #fafaf8;
  --card: #fff;
  --font-body: 'Georgia', 'Times New Roman', serif;
  --font-ui: 'Helvetica Neue', 'Arial', sans-serif;
  --font-mono: 'Menlo', 'Courier New', monospace;
  --max-width: 740px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 17px; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  padding: 3rem 1.5rem 6rem;
}

/* ── Layout ── */
.lesson-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ── Header ── */
.lesson-header {
  border-bottom: 2px solid var(--text);
  padding-bottom: 1.2rem;
  margin-bottom: 2.4rem;
}

.lesson-number {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.4rem;
}

.lesson-header h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.lesson-subtitle {
  font-size: 1.05rem;
  color: var(--muted);
  font-style: italic;
}

.lesson-meta {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.8rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--faint);
}

/* ── Typography ── */
h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 2.4rem 0 0.7rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
}

h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.6rem 0 0.4rem;
  font-family: var(--font-ui);
}

p { margin-bottom: 1rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { font-weight: 700; }
em { font-style: italic; }

ul, ol {
  margin: 0 0 1rem 1.4rem;
}
li { margin-bottom: 0.3rem; }

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: #f0f0ed;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* ── Callout boxes ── */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-light);
  padding: 0.9rem 1.1rem;
  margin: 1.4rem 0;
  border-radius: 0 4px 4px 0;
}

.callout.warn {
  border-left-color: var(--warn);
  background: var(--warn-light);
}

.callout.success {
  border-left-color: var(--success);
  background: var(--success-light);
}

.callout-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

.callout.warn .callout-label { color: var(--warn); }
.callout.success .callout-label { color: var(--success); }

/* ── Value chain diagram ── */
.chain {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 1.6rem 0;
  overflow-x: auto;
}

.chain-node {
  flex: 1;
  min-width: 110px;
  background: var(--card);
  border: 1.5px solid var(--border);
  padding: 0.8rem 0.6rem;
  text-align: center;
  font-family: var(--font-ui);
  position: relative;
}

.chain-node:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 1.1rem;
  z-index: 1;
}

.chain-node .node-layer {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-bottom: 0.2rem;
}

.chain-node .node-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.chain-node .node-example {
  font-size: 0.72rem;
  color: var(--muted);
}

.chain-node.highlight {
  border-color: var(--accent);
  background: var(--accent-light);
}

/* ── Moat table ── */
.moat-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  margin: 1.2rem 0 1.6rem;
}

.moat-table th {
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: #f0f0ed;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}

.moat-table td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.moat-table tr:last-child td { border-bottom: none; }

.moat-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.moat-tag.monopoly { background: #fde8e8; color: #c0392b; }
.moat-tag.duopoly  { background: #fdf3e8; color: #b84c00; }
.moat-tag.oligopoly { background: #fff9e6; color: #8a6500; }
.moat-tag.competitive { background: #e8f0fd; color: #0047cc; }

/* ── Quiz widget ── */
.quiz-section {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}

.quiz-section h2 {
  border: none;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.quiz-question {
  margin-bottom: 1.4rem;
}

.quiz-q {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.6rem;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  background: var(--bg);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.quiz-option:hover { border-color: var(--accent); background: var(--accent-light); }
.quiz-option.correct { border-color: var(--success); background: var(--success-light); }
.quiz-option.wrong   { border-color: #c0392b; background: #fde8e8; }
.quiz-option.reveal  { border-color: var(--success); background: var(--success-light); opacity: 0.6; }

.quiz-feedback {
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  min-height: 1.2rem;
  color: var(--muted);
}

.quiz-score {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: right;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

/* ── Recall card (active-recall / retention checkpoints) ──
   A free-recall prompt the learner answers from memory BEFORE revealing
   the model answer. The hidden answer is the whole point: retrieval effort
   is what builds storage strength. Reused across all checkpoint lessons. */
.recall-card {
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 5px 5px 0;
  background: var(--card);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
}

.recall-tags {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.4rem;
}

.recall-tags .tag {
  display: inline-block;
  background: #f0f0ed;
  border-radius: 3px;
  padding: 0.1em 0.45em;
  margin-right: 0.3rem;
  color: var(--muted);
}

.recall-prompt {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.7rem;
}

.recall-reveal-btn {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-light);
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.recall-reveal-btn:hover { background: var(--accent); color: #fff; }

.recall-answer {
  display: none;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border);
  font-size: 0.92rem;
  line-height: 1.6;
}

.recall-answer.shown { display: block; }

.recall-answer .ra-key {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--success);
  display: block;
  margin-bottom: 0.3rem;
}

.recall-answer ul { margin: 0.4rem 0 0.4rem 1.3rem; }

@media print {
  .recall-answer { display: block !important; }
  .recall-reveal-btn { display: none; }
}

/* ── Footer ── */
.lesson-footer {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--faint);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.lesson-footer a { color: var(--faint); }
.lesson-footer a:hover { color: var(--accent); }

.teacher-note {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: #f5f5f2;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  color: var(--muted);
}

/* ── Print ── */
@media print {
  body { background: white; padding: 1rem; }
  .quiz-section, .teacher-note { display: none; }
  a { color: var(--text); }
  h2 { page-break-after: avoid; }
}

/* ── Interactive calculator widget (shared component) ──
   A live model: sliders/selects on top, computed output boxes below, and a
   plain-language verdict. Reused across quantitative lessons (inference unit
   economics, KV-cache memory wall, …). Color modifiers: .rent .own .neutral .warn. */
.calc { border:2px solid var(--text); border-radius:8px; background:var(--card); padding:1.3rem 1.4rem; margin:1.6rem 0; font-family:var(--font-ui); }
.calc h3 { font-family:var(--font-ui); margin:0 0 0.3rem; font-size:1.05rem; }
.calc .calc-sub { font-size:0.78rem; color:var(--muted); margin-bottom:1rem; }
.calc-inputs { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem 1.4rem; }
.calc-field { display:flex; flex-direction:column; gap:0.15rem; }
.calc-field label { font-size:0.72rem; font-weight:700; color:var(--muted); display:flex; justify-content:space-between; }
.calc-field label .val { color:var(--accent); font-family:var(--font-mono); }
.calc-field input[type=range] { width:100%; accent-color:var(--accent); }
.calc-field select { font-family:var(--font-ui); font-size:0.82rem; padding:0.25rem 0.4rem; border:1.5px solid var(--border); border-radius:4px; background:var(--bg); }
.calc-divider { border:none; border-top:1px solid var(--border); margin:1.1rem 0 0.9rem; }
.calc-out { display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; margin-top:0.4rem; }
.calc-out.three { grid-template-columns:1fr 1fr 1fr; }
.calc-box { border:1.5px solid var(--border); border-radius:6px; padding:0.8rem 0.9rem; text-align:center; }
.calc-box.rent { border-color:var(--warn); background:var(--warn-light); }
.calc-box.own { border-color:var(--success); background:var(--success-light); }
.calc-box.neutral { border-color:var(--accent); background:var(--accent-light); }
.calc-box.warn { border-color:var(--warn); background:var(--warn-light); }
.calc-box .cb-lbl { font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--faint); }
.calc-box .cb-big { font-size:1.5rem; font-weight:700; line-height:1.15; margin:0.2rem 0; }
.calc-box.rent .cb-big { color:var(--warn); }
.calc-box.own .cb-big { color:var(--success); }
.calc-box.neutral .cb-big { color:var(--accent); }
.calc-box .cb-sub { font-size:0.72rem; color:var(--muted); }
.calc-verdict { margin-top:0.9rem; padding:0.7rem 0.9rem; border-radius:6px; background:#f5f5f2; font-size:0.82rem; line-height:1.5; }
.calc-verdict strong { color:var(--text); }

@media (max-width: 600px) {
  html { font-size: 15px; }
  .chain { flex-direction: column; }
  .chain-node::after { display: none; }
  .lesson-meta { flex-direction: column; gap: 0.3rem; }
  .calc-inputs, .calc-out, .calc-out.three { grid-template-columns: 1fr; }
}

/* ── Site navigation bar (injected on lesson pages by assets/site-nav.js) ──
   Fixed top bar with Map / All Lessons / Prev / Next. The body class reserves
   space so the bar never covers the lesson header. */
body.has-site-nav { padding-top: calc(3rem + 44px); }
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
}
.site-nav .snav-inner {
  max-width: 980px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem;
  font-size: 0.8rem;
}
.site-nav a, .site-nav span { white-space: nowrap; }
.site-nav a {
  color: var(--text); text-decoration: none; font-weight: 700;
  padding: 0.3rem 0.6rem; border-radius: 5px; transition: background 0.15s, color 0.15s;
}
.site-nav a:hover { background: var(--accent-light); color: var(--accent); }
.site-nav .snav-home { color: var(--accent); }
.site-nav .snav-spacer { flex: 1; }
.site-nav .snav-title {
  color: var(--faint); font-weight: 400; font-size: 0.74rem;
  overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}
.site-nav .snav-disabled { color: var(--border); font-weight: 700; padding: 0.3rem 0.6rem; cursor: default; }
@media (max-width: 640px) {
  .site-nav .snav-title { display: none; }
  .site-nav .snav-inner { gap: 0.25rem; font-size: 0.78rem; padding: 0 0.6rem; }
  body.has-site-nav { padding-top: calc(2rem + 44px); }
}
@media print {
  .site-nav { display: none; }
  body.has-site-nav { padding-top: 1rem; }
}

/* ── Bottom-of-lesson pager (Prev / Next), injected by assets/site-nav.js ── */
.lesson-pager {
  display: flex; justify-content: space-between; align-items: stretch; gap: 1rem;
  margin: 3rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--border);
}
.lesson-pager a {
  flex: 1 1 0; max-width: 49%; display: flex; flex-direction: column; gap: 0.2rem;
  font-family: var(--font-ui); text-decoration: none;
  border: 1.5px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem;
  background: var(--card); transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.lesson-pager a:hover {
  border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px); text-decoration: none;
}
.lesson-pager .lp-next { text-align: right; align-items: flex-end; }
.lesson-pager .lp-dir { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.lesson-pager .lp-ttl { font-size: 0.92rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.lesson-pager .lp-spacer { flex: 1 1 0; max-width: 49%; }
@media (max-width: 480px) {
  .lesson-pager .lp-ttl { font-size: 0.82rem; }
}
@media print { .lesson-pager { display: none; } }