/* Lessons of the illustrated AI Primer, and the course home. Builds on article.css. */

/* Series colours for figures drawn by the lessons' own code (see tools/build_course.py). */
:root {
  --c1: oklch(0.72 0.15 255); --c2: oklch(0.7 0.18 25); --c3: oklch(0.76 0.14 158);
  --c4: oklch(0.8 0.14 70); --c5: oklch(0.72 0.16 300); --c6: oklch(0.78 0.12 205); --c7: oklch(0.72 0.17 350);
}
:root[data-theme="light"] {
  --c1: oklch(0.52 0.18 260); --c2: oklch(0.55 0.2 27); --c3: oklch(0.55 0.13 160);
  --c4: oklch(0.62 0.15 60); --c5: oklch(0.52 0.2 295); --c6: oklch(0.56 0.11 215); --c7: oklch(0.56 0.2 355);
}

/* The Primer's widgets read --p-* tokens; point them at ours so they sit in the page. */
:root {
  --p-bg: var(--bg-2); --p-fg: var(--ink); --p-muted: var(--ink-3); --p-card: var(--surface); --p-card-2: var(--surface-2);
  --p-border: var(--line-2); --p-accent: var(--accent); --p-accent-strong: var(--accent-ink); --p-accent-soft: var(--accent-soft);
  --p-code: var(--bg-2); --p-hover: var(--accent-soft); --p-mark: var(--gold-soft);
}
.fig .viz { max-width: none; margin: 8px 0 0; border: 0; padding: 0; background: transparent; font-family: var(--f-ui); }

/* ---------- hero ---------- */
.l-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(56px, 10vw, 120px) var(--gutter) clamp(40px, 6vw, 70px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60% 70% at 50% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(35% 45% at 0% 100%, color-mix(in oklab, var(--gold) 9%, transparent), transparent 70%);
}
.l-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
}
.l-hero-inner { position: relative; max-width: 980px; margin: 0 auto; }
.l-hero .kicker { margin-bottom: 20px; }
.l-hero .display { font-size: clamp(3.4rem, 12vw, 8.4rem); }
.l-hero .display.long { font-size: clamp(2.6rem, 7vw, 5.6rem); }
.l-sub { font: italic 400 clamp(1.4rem, 3.2vw, 2.2rem)/1.2 var(--f-display); color: var(--accent-ink); margin: 14px auto 0; max-width: 40rem; text-wrap: balance; }
.l-outcome { max-width: 40rem; margin: 26px auto 0; font-size: 0.95rem; color: var(--ink-2); }
.l-outcome span { display: block; font: 500 0.7rem var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.l-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 22px 0 6px; font-size: 0.82rem; color: var(--ink-3); align-items: center; }
.badge { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.access-free { color: var(--good); background: color-mix(in oklab, var(--good) 14%, transparent); }
.access-member { color: var(--gold); background: var(--gold-soft); }

/* ---------- the ladder, made visible ---------- */
.rung-p::first-line { }
.rung-p > strong:first-child {
  display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; vertical-align: 2px;
  font: 500 0.66rem var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--r, var(--accent-ink)); background: color-mix(in oklab, var(--r, var(--accent)) 14%, transparent);
}
.rung-p[data-rung="picture"] { --r: var(--gold); }
.rung-p[data-rung="example"] { --r: var(--c3); }
.rung-p[data-rung="math"] { --r: var(--accent-ink); }
.rung-p[data-rung="why"] { --r: var(--c7); }
.chapter h4 { font: 600 0.95rem var(--f-ui); margin: 2em auto 0.5em; max-width: var(--text-w); }

/* ---------- figures from the lesson's code ---------- */
.mpl-wrap { overflow-x: auto; }
.mpl { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; }
.fig-alt { font: 0.8rem/1.5 var(--f-ui); color: var(--ink-3); margin: 10px 0 0; }
.mermaid-out { overflow-x: auto; display: flex; justify-content: center; min-height: 60px; }
.mermaid-out svg { max-width: 100% !important; height: auto; }
.mermaid-src { font: 0.8rem var(--f-mono); white-space: pre-wrap; color: var(--ink-3); }
.try { font: 0.92rem/1.55 var(--f-ui); color: var(--ink-2); margin: 0 0 12px; }

/* ---------- equations from the lesson ---------- */
.eq-card .eq + .eq { margin-top: -6px; }
.sym-label { margin: 16px 0 8px; }
.symtable { width: 100%; border-collapse: collapse; font: 0.84rem/1.45 var(--f-ui); }
.symtable th { text-align: left; font: 500 0.66rem var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.symtable td { padding: 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.symtable td:first-child { color: var(--ink); white-space: nowrap; }
.symtable tr:hover td { background: var(--accent-soft); }
.m .katex { font-size: 1.02em; }
.eq-card .code { margin-top: 16px; }

/* ---------- code ---------- */
.incode {
  font-size: 0.86rem; color: var(--ink-2); padding: 12px 16px; border-radius: var(--r-2);
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
}
.incode > strong:first-child { color: var(--accent-ink); }
a.code-link { text-decoration: none; }
a.code-link code { color: var(--accent-ink); background: var(--accent-soft); }
a.code-link:hover code { background: color-mix(in oklab, var(--accent) 25%, transparent); }
pre.codeblock { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 16px 18px; overflow-x: auto; }
pre.codeblock code, .code pre code { background: none; padding: 0; font-size: 0.8rem; line-height: 1.6; color: var(--ink-2); }
.chapter ul:not(.fig ul), .chapter ol:not(.beats):not(.fig ol) { padding-left: 1.3em; }
.chapter li { margin-bottom: 0.45em; }

/* ---------- glossary terms from the Primer ---------- */
.gl-term { text-decoration: underline dotted var(--ink-3); text-underline-offset: 4px; text-decoration-thickness: 1.5px; cursor: help; border-radius: 3px; }
.gl-term:hover, .gl-term:focus-visible { background: var(--accent-soft); text-decoration-color: var(--accent); outline: none; }
.tip a { color: var(--accent-ink); font-weight: 500; }

/* ---------- self-test ---------- */
.q summary { list-style: none; cursor: pointer; display: grid; gap: 6px; }
.q summary::-webkit-details-marker { display: none; }
.q .qt { font: 400 1.35rem/1.25 var(--f-display); color: var(--ink); }
.q .reveal { font-size: 0.8rem; color: var(--accent-ink); }
.q[open] .reveal { color: var(--ink-3); }
.q[open] .reveal::after { content: " · revealed"; }
.q .answer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 1.02rem; color: var(--ink-2); }
.q .answer p:last-child { margin-bottom: 0; }

/* ---------- authored extras ---------- */
.authored-intro { font: 0.9rem var(--f-ui); color: var(--ink-3); border-left: 2px solid var(--gold); padding-left: 12px; }
.chapter > .authored { max-width: var(--wide-w); }
.authored > * { max-width: var(--text-w); margin-left: auto; margin-right: auto; }
.authored > [data-component] { max-width: var(--wide-w); }

/* ---------- further reading, nav ---------- */
.further ul { padding-left: 1.2em; }
.further li { font-size: 0.98rem; color: var(--ink-2); }
.lesson-nav { display: grid; gap: 12px; grid-template-columns: 1fr; max-width: var(--wide-w) !important; }
@media (min-width: 760px) { .lesson-nav { grid-template-columns: 1fr 1fr; } }
.nav-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; text-decoration: none; color: var(--ink); transition: transform 0.3s var(--ease), border-color 0.3s; }
.nav-card:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; }
.nav-card.next { text-align: right; }
.nav-card .t { font: 400 1.7rem/1.1 var(--f-display); }
.nav-card .o { font-size: 0.84rem; color: var(--ink-3); }

/* ---------- course home ---------- */
.course-hero { max-width: 980px; margin: 0 auto; padding: clamp(60px, 10vw, 120px) var(--gutter) 30px; }
.course-hero .display { font-size: clamp(3rem, 9vw, 7rem); margin-top: 18px; }
.course-hero .lede { max-width: 44rem; margin-top: 26px; }
.course-status { font-size: 0.86rem; color: var(--ink-3); margin-top: 20px; }
.course-status b { color: var(--gold); }
.course-parts { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.part { padding-top: 56px; }
.part-head { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.part-head .kicker { color: var(--ink-2); }
.part-head .blurb { margin: 0; font-size: 1rem; color: var(--ink-3); }
.lesson-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.lesson-card { display: grid; grid-template-columns: 38px 1fr; gap: 2px 10px; padding: 16px 18px; text-decoration: none; color: var(--ink); transition: transform 0.3s var(--ease), border-color 0.3s; opacity: 0.72; }
.lesson-card.on { opacity: 1; border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 55%); }
.lesson-card:hover { transform: translateY(-2px); border-color: var(--accent); opacity: 1; text-decoration: none; }
.lesson-card .n { grid-row: span 3; font: 400 1.6rem/1 var(--f-display); color: var(--ink-3); }
.lesson-card.on .n { color: var(--accent-ink); }
.lesson-card .t { font: 400 1.35rem/1.15 var(--f-display); }
.lesson-card .o { font: 0.8rem/1.4 var(--f-ui); color: var(--ink-3); }
.lesson-card .sts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st { font: 500 0.68rem var(--f-ui); color: var(--ink-3); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); }
.st.ready { color: var(--accent-ink); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.st.free { color: var(--good); border-color: color-mix(in oklab, var(--good) 45%, transparent); }
.lin .acts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 8px; }
.lin .acts .s { padding-top: 0; text-decoration: none; }
.l-hero-art { position: relative; max-width: 1100px; margin: -20px auto 10px; }
.l-hero-art svg { width: 100%; height: auto; overflow: visible; }

/* ---------- the Primer's three levels ---------- */
/* Level 1, the practitioner's guide: labels down the left like an encyclopedia's margin, the
   answer on the right, and the options table given the full width it needs. */
.guide { --lv: var(--good); }
.lv2#how-it-works { --lv: var(--accent-ink); }
.guide > .ch-head .kicker, #how-it-works > .ch-head .kicker { color: var(--lv); }
.guide > .ch-head .kicker::before, #how-it-works > .ch-head .kicker::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%;
  background: var(--lv); vertical-align: 1px;
}
.chapter > .g-item { max-width: var(--text-w); margin-top: 30px; }
.g-label { margin: 0 0 8px; font: 600 0.72rem/1.3 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--good); }
.g-item > p { margin: 0 0 0.8em; }
.g-item[data-g="sentence"] > p { font: 400 clamp(1.25rem, 2.4vw, 1.5rem)/1.4 var(--f-display); color: var(--ink); }
.g-item[data-g="options"] .table-wrap { margin: 18px 0 8px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
@media (min-width: 700px) { .options { min-width: 44rem; } }
@media (max-width: 699px) {
  .g-item[data-g="options"] .table-wrap { border: 0; background: none; overflow: visible; }
  .options thead { display: none; }
  .options, .options tbody, .options tr, .options td { display: block; }
  .options tbody tr { margin-bottom: 12px; padding: 6px 0; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface) !important; }
  .options td { border: 0; padding: 6px 16px; }
  .options td:not(:first-child)::before { content: attr(data-col); display: block; font: 500 0.64rem var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
  .options tbody td:first-child { white-space: normal; font-size: 1rem; padding-top: 10px; }
}
.options th, .options td { padding: 12px 14px; }
/* Option names wrap: one held on a single line squeezes the columns that explain it. */
.options tbody td:first-child { color: var(--ink); font-weight: 600; font-family: var(--f-ui); width: 24%; }
.options tbody tr:nth-child(even) { background: color-mix(in oklab, var(--ink) 3%, transparent); }
.g-item[data-g="breaks"] ul { list-style: none; padding-left: 0 !important; }
.g-item[data-g="breaks"] li { padding: 2px 0 2px 16px; border-left: 2px solid color-mix(in oklab, var(--bad) 70%, transparent); margin-bottom: 14px; }
.g-item[data-g="breaks"] li > strong:first-child { color: var(--ink); }
.g-item[data-g="deeper"] > p { color: var(--ink-2); }
@media (min-width: 900px) {
  .chapter > .g-item { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 32px; max-width: calc(var(--text-w) + 11rem + 32px); }
  .g-item > * { grid-column: 2; }
  .g-item > .g-label { grid-column: 1; grid-row: 1 / span 20; padding-top: 6px; text-align: right; }
  .g-item[data-g="options"] > .table-wrap { grid-column: 1 / -1; }
}

/* Between the guide and Level 2: the way down, shown only to a Level 1 reader. */
.chapter + .descend, .descend { max-width: var(--text-w); margin: 56px auto 0; padding: 22px clamp(16px, 3vw, 26px); border: 1px dashed color-mix(in oklab, var(--accent) 55%, transparent); }
.descend .kicker { color: var(--accent-ink); margin: 0 0 8px; font-size: 0.72rem; }
.descend p { margin: 0 0 16px; color: var(--ink-2); font-size: 0.95rem; }
.descend-go { display: flex; flex-wrap: wrap; gap: 10px; }

/* Level 3 folds: the formula and its symbols, and the Python, one click away at Level 2. */
details.eq-fold { margin: 0 0 14px; }
details.eq-fold > summary, .eq-card .code > summary { cursor: pointer; font: 500 0.8rem var(--f-ui); color: var(--c5); list-style: none; padding: 4px 0; }
details.eq-fold > summary::-webkit-details-marker { display: none; }
details.eq-fold > summary::before, .eq-card .code > summary::before { content: "＋ "; }
details.eq-fold[open] > summary::before, .eq-card .code[open] > summary::before { content: "− "; }
.eq-card .code > summary { padding: 14px 18px; }
.rail li.lv2:first-of-type { margin-top: 0; }

/* ---------- share ---------- */
.share { max-width: var(--text-w); margin: 48px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.88rem; }
.share .share-t { color: var(--ink-3); margin-right: 4px; }
.share a { color: var(--ink-2); text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.share a:hover { color: var(--ink); border-color: var(--line-2); }