/* ═══════════════════════════════════════════════════════════════
   CLAUDE CODE MASTERCLASS · LESSON PAGES
   Shares the curriculum page's design system: the nine levels ramp
   from indigo night to amber daylight, and Level 6 is dark in both
   themes because that level is about 7am.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:          oklch(1 0 0);
  --surface:     oklch(0.973 0.003 265);
  --surface-2:   oklch(0.988 0.002 265);
  --ink:         oklch(0.21 0.014 265);
  --ink-2:       oklch(0.40 0.010 265);
  --ink-3:       oklch(0.48 0.008 265);
  --line:        oklch(0.885 0.006 265);
  --line-2:      oklch(0.932 0.005 265);
  --on-acc:      oklch(1 0 0);

  /* Level 6 · the lamp. Dark in BOTH themes — that is the point. */
  --six-bg:      oklch(0.165 0.024 68);
  --six-bg-2:    oklch(0.125 0.020 66);
  --six-ink:     oklch(0.965 0.014 82);
  --six-ink-2:   oklch(0.795 0.022 78);
  --six-line:    oklch(0.385 0.045 70);
  --six-line-2:  oklch(0.235 0.030 70);
  --six-acc:     oklch(0.835 0.155 74);

  --f-sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --f-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 36rem;
  --radius: 12px;
  --ease: cubic-bezier(0.16, 0.84, 0.44, 1);
}

.lv-0{ --acc:oklch(0.475 0.165 278); }
.lv-1{ --acc:oklch(0.475 0.160 264); }
.lv-2{ --acc:oklch(0.475 0.150 250); }
.lv-3{ --acc:oklch(0.472 0.140 234); }
.lv-4{ --acc:oklch(0.470 0.125 218); }
.lv-5{ --acc:oklch(0.468 0.110 200); }
.lv-6{ --acc:var(--six-acc); --on-acc:oklch(0.185 0.024 70); }
.lv-7{ --acc:oklch(0.500 0.145 52); }
.lv-8{ --acc:oklch(0.495 0.150 32); }

@media (prefers-color-scheme: dark){
  :root{
    --bg:       oklch(0.165 0.012 265);
    --surface:  oklch(0.205 0.013 265);
    --surface-2:oklch(0.188 0.012 265);
    --ink:      oklch(0.955 0.004 265);
    --ink-2:    oklch(0.795 0.008 265);
    --ink-3:    oklch(0.680 0.010 265);
    --line:     oklch(0.330 0.012 265);
    --line-2:   oklch(0.268 0.011 265);
  }
  .lv-0{ --acc:oklch(0.780 0.130 278); }
  .lv-1{ --acc:oklch(0.780 0.125 264); }
  .lv-2{ --acc:oklch(0.785 0.115 250); }
  .lv-3{ --acc:oklch(0.795 0.108 234); }
  .lv-4{ --acc:oklch(0.805 0.100 218); }
  .lv-5{ --acc:oklch(0.815 0.095 200); }
  .lv-7{ --acc:oklch(0.805 0.130 52); }
  .lv-8{ --acc:oklch(0.790 0.135 32); }
}

/* Level 6 pages carry the lamp in both themes. */
body.lv-6{
  --bg: var(--six-bg); --surface: var(--six-bg-2); --surface-2: var(--six-bg-2);
  --ink: var(--six-ink); --ink-2: var(--six-ink-2); --ink-3: var(--six-ink-2);
  --line: var(--six-line); --line-2: var(--six-line-2);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.68 var(--f-sans);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--acc); }

/* ───────── top bar ───────── */
.topbar{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding:0 1.5rem; height:58px;
  border-bottom:1px solid var(--line-2);
  background:color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  position:sticky; top:0; z-index:50;
}
.topbar .home{
  font-weight:640; text-decoration:none; color:var(--ink); font-size:.94rem;
  display:inline-flex; align-items:center; gap:.55rem;
}
.topbar .home::before{
  content:""; width:.5rem; height:.5rem; background:var(--acc); flex:none;
  border-radius:2px;
}
.topbar .crumb{
  color:var(--ink-3); font-size:.78rem; font-family:var(--f-mono);
  letter-spacing:.02em;
}
.topbar .all{ margin-left:auto; font-size:.82rem; color:var(--ink-3); text-decoration:none; }
.topbar .all:hover{ color:var(--acc); }

/* ───────── lesson ───────── */
.lesson{ max-width:44rem; margin:0 auto; padding:3rem 1.5rem 6rem; }
.eyebrow{
  margin:0 0 .6rem; color:var(--acc); font-weight:600;
  letter-spacing:.16em; font-size:.72rem; font-family:var(--f-mono);
}
.lesson h1{
  font-family:var(--f-serif); font-weight:600;
  font-size:clamp(2rem, 5vw, 2.9rem); line-height:1.06;
  margin:0 0 1.2rem; letter-spacing:-.015em; text-wrap:balance;
}
dl.meta{
  display:flex; flex-wrap:wrap; gap:2rem; margin:0 0 2rem;
  padding-bottom:1.5rem; border-bottom:1px solid var(--line-2);
}
dl.meta dt{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--ink-3); margin-bottom:.25rem; font-family:var(--f-mono);
}
dl.meta dd{ margin:0; font-size:.94rem; color:var(--ink-2); }

/* ───────── video ───────── */
.video{ margin:0 0 2.5rem; }
.video video{
  width:100%; display:block; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 1px 2px oklch(0 0 0 / .05), 0 12px 32px oklch(0 0 0 / .08);
}
body.lv-6 .video video{ box-shadow:0 0 0 1px var(--six-line), 0 18px 48px oklch(0 0 0 / .45); }
.video.pending .pending-inner{
  display:flex; flex-direction:column; gap:.45rem;
  padding:2.5rem 1.5rem; text-align:center;
  border:1px dashed var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink-2);
}
.video.pending strong{ color:var(--ink); }
.video.pending span{ font-size:.9rem; max-width:30rem; margin:0 auto; }

/* ───────── assets ───────── */
.assets{
  margin:0 0 2.75rem; padding:1.15rem 1.35rem;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius);
}
.assets h2{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-3); margin:0 0 .85rem; font-family:var(--f-mono);
}
.assets ul{ list-style:none; margin:0; padding:0; }
.assets li + li{ margin-top:.85rem; }
a.asset{
  display:inline-flex; align-items:baseline; gap:.5rem;
  font-weight:560; text-decoration:none; color:var(--acc);
}
a.asset:hover .asset-label{ text-decoration:underline; }
.asset-icon{ color:var(--ink-3); font-size:.8rem; font-family:var(--f-mono); }
.asset-note{ display:block; font-size:.85rem; color:var(--ink-3); margin-left:1.3rem; margin-top:.1rem; }

/* ───────── sections ───────── */
.sec{ margin:0 0 2.75rem; }
.sec > h2{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--ink-3); margin:0 0 1rem; font-family:var(--f-mono);
  padding-bottom:.55rem; border-bottom:1px solid var(--line-2);
}
.sec p, .sec li{ max-width:var(--measure); }
.sec p{ margin:0 0 1.05rem; color:var(--ink-2); }
.sec strong{ font-weight:640; color:var(--ink); }
.sec blockquote{
  margin:0 0 1.05rem; padding:.15rem 0 .15rem 1.1rem;
  border-left:2px solid var(--acc); color:var(--ink-2); font-style:italic;
}
.sec code{
  font:.87em/1.4 var(--f-mono);
  background:var(--surface); border:1px solid var(--line-2);
  padding:.1em .38em; border-radius:5px; color:var(--ink);
}
.sec pre{
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:1.05rem; overflow-x:auto; margin:0 0 1.05rem;
}
.sec pre code{ background:none; border:0; padding:0; }
.sec table{ width:100%; border-collapse:collapse; margin:0 0 1.35rem; font-size:.9rem; }
.sec table th, .sec table td{
  text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--line-2);
  vertical-align:top;
}
.sec table th{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-3); font-family:var(--f-mono); font-weight:600;
}
.sec table td{ color:var(--ink-2); }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sec ol, .sec ul{ padding-left:1.35rem; margin:0 0 1.05rem; color:var(--ink-2); }
.sec li{ margin-bottom:.55rem; }
.sec li::marker{ color:var(--ink-3); }

/* Do — the task. The most important block on the page. */
.sec.do{
  background:var(--surface); border:1px solid var(--line-2);
  border-left:3px solid var(--acc);
  border-radius:var(--radius); padding:1.4rem 1.5rem;
}
.sec.do > h2{ color:var(--acc); }
.sec.do ol{ counter-reset:step; list-style:none; padding-left:0; }
.sec.do ol > li{
  counter-increment:step; position:relative; padding-left:2.1rem; margin-bottom:.7rem;
}
.sec.do ol > li::before{
  content:counter(step); position:absolute; left:0; top:.08em;
  font-family:var(--f-mono); font-size:.72rem; font-weight:600;
  color:var(--acc); border:1px solid var(--line);
  width:1.5rem; height:1.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
/* Never do — the guardrail. */
.sec.never-do{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.4rem 1.5rem;
}
.sec.never-do > h2{ color:var(--ink-2); }

ul.checklist{ list-style:none; padding:0; margin:0 0 1.05rem; }
ul.checklist li{ margin-bottom:.6rem; max-width:var(--measure); }
ul.checklist label{ display:flex; gap:.7rem; align-items:flex-start; cursor:pointer; }
ul.checklist input{
  margin-top:.42rem; width:1.05rem; height:1.05rem;
  accent-color:var(--acc); flex:none; cursor:pointer;
}
ul.checklist span{ color:var(--ink-2); }
ul.checklist input:checked + span{ color:var(--ink-3); text-decoration:line-through; }

/* ───────── pager ───────── */
.pager{
  display:flex; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--line-2); padding-top:1.75rem; margin-top:3.5rem;
}
.pager a{
  display:flex; gap:.7rem; align-items:center;
  text-decoration:none; color:var(--ink); max-width:48%;
  transition:color .2s var(--ease);
}
.pager a:hover{ color:var(--acc); }
.pager .nav-next{ margin-left:auto; text-align:right; flex-direction:row-reverse; }
.nav-arrow{ color:var(--ink-3); font-family:var(--f-mono); }
.nav-label{
  display:block; font-size:.64rem; text-transform:uppercase;
  letter-spacing:.11em; color:var(--ink-3); font-family:var(--f-mono);
}
.nav-title{ font-size:.9rem; font-weight:530; }
.nav-empty{ flex:1; }

/* ───────── all-lessons contents page ───────── */
.hero{ max-width:44rem; margin:0 auto; padding:3.5rem 1.5rem 1.5rem; }
.hero h1{
  font-family:var(--f-serif); font-weight:600;
  font-size:clamp(2rem, 5vw, 2.8rem); line-height:1.06; margin:0 0 .9rem;
  letter-spacing:-.015em;
}
.hero .sub{ color:var(--ink-2); max-width:var(--measure); margin:0 0 1rem; }
.hero .stat{
  display:inline-block; margin:0; font-size:.8rem; color:var(--ink-2);
  font-family:var(--f-mono);
  border:1px solid var(--line); padding:.35rem .75rem; border-radius:99px;
}
.index{ max-width:44rem; margin:0 auto; padding:1rem 1.5rem 6rem; }
.level{ margin:3rem 0 0; }
.level h2{
  font-family:var(--f-serif); font-weight:600;
  font-size:1.45rem; margin:0 0 .35rem; letter-spacing:-.01em;
}
.lvl-num{
  display:inline-block; font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--acc); font-family:var(--f-mono);
  border:1px solid var(--line); border-radius:99px;
  padding:.2rem .6rem; margin-right:.6rem; vertical-align:.2em;
}
.blurb{ color:var(--ink-3); font-size:.88rem; margin:0 0 1.1rem; max-width:var(--measure); }
ol.lessons{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
ol.lessons li{ border-bottom:1px solid var(--line-2); }
ol.lessons a{
  display:grid; grid-template-columns:3rem 1fr auto;
  align-items:center; gap:.85rem;
  padding:.9rem .5rem; text-decoration:none; color:var(--ink);
}
ol.lessons a:hover{ background:var(--surface); }
.ln{ color:var(--ink-3); font-family:var(--f-mono); font-size:.8rem; }
.lt{ font-weight:520; }
.ltime{ font-size:.8rem; color:var(--ink-3); white-space:nowrap; font-family:var(--f-mono); }
.badge{
  font-size:.64rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.22rem .55rem; border-radius:99px; white-space:nowrap;
  border:1px solid var(--line); color:var(--ink-3); font-family:var(--f-mono);
}

@media (max-width:640px){
  body{ font-size:16px; }
  .lesson{ padding-top:2rem; }
  .topbar{ height:auto; padding:.7rem 1rem; }
  .topbar .crumb{ width:100%; order:3; }
  .sec.do, .sec.never-do{ padding:1.15rem 1.1rem; }
  ol.lessons a{ grid-template-columns:2.6rem 1fr; }
  ol.lessons .badge, ol.lessons .ltime{ grid-column:2; justify-self:start; }
  .pager a{ max-width:47%; }
}