/* The Practical Claude Course — Docsify theme on the Serenity design system.
 * Tokens (palette, fonts, scales, shadows) come from site/design-tokens.css.
 * This file maps Docsify's classes onto those tokens so the course site shares
 * the marketing landing page's visual language.
 */

:root {
  --theme-color: var(--accent);
  --reader-heading: #263946;
  --reader-panel: #fffdf8;
  --reader-mint-soft: #eefaf4;
  --reader-mint-hover: rgba(7, 138, 82, 0.045);
  --reader-gold-soft: #fdf5e3;
  --reader-purple-soft: #f5f1ff;
  --reader-purple-wash: rgba(239, 234, 255, 0.24);
  --reader-sidebar-width: 320px;
}

* { box-sizing: border-box; }

html, body {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.16px;
}

/* The dot-grid surface texture from the landing page, behind everything.
 * Gradients are gated on .docsify-ready (set in learn/index.html once
 * Docsify finishes its first render) so the matcha bloom in the top-left
 * doesn't flash green during the brief loading window before the sidebar
 * and content paint over the body. */
body {
  background-color: var(--warm-cream);
}
body.docsify-ready {
  background-image:
    radial-gradient(circle at 18% 10%, rgba(132, 231, 165, 0.20), transparent 34rem),
    radial-gradient(circle at 96% 4%, var(--reader-purple-wash), transparent 30rem),
    radial-gradient(rgba(13, 10, 8, 0.026) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  background-position: 0 0, 0 0, 0 0;
}

.reader-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: var(--reader-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--warm-cream);
  color: var(--fg-primary);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}

body.reader-ready .reader-loading-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

body.reader-loading .sidebar,
body.reader-loading .content,
body.reader-loading .sidebar-toggle {
  opacity: 0;
}

body.reader-loading #app {
  color: transparent;
}

.reader-loading-sidebar {
  border-right: 1px solid var(--border-default);
  background: rgba(250, 249, 247, 0.94);
}

.reader-loading-brand-skeleton {
  height: 73px;
  padding: 26px 32px;
  border-bottom: 1px solid var(--border-default);
}

.reader-loading-brand-skeleton::before {
  content: '';
  display: block;
  width: 196px;
  max-width: 100%;
  height: 20px;
  border-radius: 4px;
  background: rgba(31, 24, 16, 0.09);
}

.reader-loading-search {
  height: 42px;
  margin: 12px 24px 16px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
}

.reader-loading-nav {
  display: grid;
  gap: 12px;
  padding: 0 16px;
}

.reader-loading-nav span {
  display: block;
  height: 62px;
  border: 1px solid rgba(31, 24, 16, 0.11);
  border-left: 4px solid rgba(7, 138, 82, 0.24);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.72);
}

.reader-loading-main {
  width: min(780px, calc(100vw - var(--reader-sidebar-width) - 96px));
  margin: 0 auto;
  padding: 109px 48px 96px;
}

.reader-loading-status {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--fg-secondary);
}

.reader-loading-lines {
  display: grid;
  gap: 14px;
  margin-top: 0;
}

.reader-loading-lines span {
  display: block;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(31, 24, 16, 0.08), rgba(7, 138, 82, 0.10), rgba(31, 24, 16, 0.08));
  background-size: 240% 100%;
  animation: reader-loading-shimmer 1.4s ease-in-out infinite;
}

.reader-loading-lines span:nth-child(1) { width: min(100%, 620px); }
.reader-loading-lines span:nth-child(2) { width: min(96%, 590px); }
.reader-loading-lines span:nth-child(3) { width: min(72%, 440px); }

@keyframes reader-loading-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.sidebar-toggle {
  display: none;
}

/* Hide Docsify's vue.css loading progress bar. It paints as a fixed
 * 2px strip across the top of the viewport in --theme-color (our
 * brand green), and during route changes it animates from width:0
 * out across the screen — visitors landing from the marketing page
 * read that quick green swipe as "a different site flashed by."
 * We already have a "Loading The Practical Claude Course…" placeholder
 * inside #app, so the strip is redundant. */
.progress {
  display: none !important;
}

/* ---------------- SIDEBAR ---------------- */

.sidebar {
  background: rgba(250, 249, 247, 0.94);
  border-right: 1px solid var(--border-default);
  padding-top: 0;
  width: var(--reader-sidebar-width);
  display: flex;
  flex-direction: column;
}

/* Wordmark on top, search below it, then nav. Docsify renders the search
 * plugin above .app-name by default; flex order puts the brand first. */
.sidebar .app-name { order: 1; }
.sidebar .search   { order: 2; }
.sidebar-nav       { order: 3; }

/* Match the landing page nav's brand offset so the wordmark lands at the
 * same screen position when navigating between surfaces. The landing nav
 * is a flex row with align-items: center, and its tallest child (the
 * primary CTA button) pushes the 20px brand text down to y=26 from the
 * viewport top. Mirror that 26px offset here.
 *
 * Docsify wraps .app-name in an <h1>, whose default vue.css font-size and
 * margins would otherwise blow the wordmark up onto two lines — so we
 * reset both. */
.sidebar h1.app-name,
.sidebar .app-name {
  margin: 0;
  padding: 26px 32px;
  font-size: 20px;
  line-height: 1;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.sidebar .app-name .app-name-link,
.sidebar .app-name a {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--fg-primary);
  text-decoration: none;
  white-space: nowrap;
}

.sidebar .app-name .brand-accent,
.sidebar .app-name .brand-period,
.site-disclaimer .brand-accent {
  color: var(--matcha-600);
}

/* Hide the wordmark until the doneEach hook has injected the brand-accent
 * spans. Otherwise the user sees a flash of plain-black "Practical" before
 * it turns green on first paint. */
.sidebar .app-name-link {
  visibility: hidden;
}
.sidebar .app-name-link[data-brand-styled] {
  visibility: visible;
}

/* Search sits directly under the wordmark; the wordmark's own
 * border-bottom is the hairline between them. */
.sidebar .search {
  padding: 12px 24px 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border-default);
}
.sidebar .search input[type="search"] {
  width: 100%;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
}

.sidebar-nav { padding: 0 16px 32px; }

.sidebar-nav > p {
  margin: 0;
}

.sidebar-nav > p > strong {
  display: block;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--fg-primary);
  padding: 18px 16px 8px;
}

.sidebar-nav > ul + p > strong {
  padding-top: 24px;
}

.sidebar-nav ul { padding-left: 0; margin: 0; }
.sidebar-nav ul ul {
  padding-left: 8px;
  border-left: 1px dashed var(--border-default);
  margin: 4px 0 12px 8px;
}

.sidebar-nav li {
  margin: 8px 0;
  list-style: none;
}

.sidebar-nav li.section-start {
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px dashed var(--border-default);
}

.sidebar-nav li.section-start[data-section="intro"]::before,
.sidebar-nav li.section-start[data-section="cowork"]::before,
.sidebar-nav li.section-start[data-section="code"]::before,
.sidebar-nav li.section-start[data-section="bonus"]::before,
.sidebar-nav li.section-start[data-section="reference"]::before {
  display: block;
  margin: -8px 0 9px 2px;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sidebar-nav li.section-start[data-section="intro"]::before {
  content: 'Intro + Chat';
  color: var(--matcha-800);
}

.sidebar-nav li.section-start[data-section="cowork"]::before {
  content: 'Cowork';
  color: var(--lemon-800);
}

.sidebar-nav li.section-start[data-section="code"]::before {
  content: 'Claude Code';
  color: var(--ube-800);
}

.sidebar-nav li.section-start[data-section="bonus"]::before {
  content: 'Bonus Section';
  color: var(--matcha-800);
}

.sidebar-nav li.section-start[data-section="reference"]::before {
  content: 'Reference';
  color: var(--fg-secondary);
}

.sidebar-nav li > a,
.sidebar-nav li > p > a {
  display: block;
  position: relative;
  padding: 12px 14px 13px 16px;
  border: 1px solid rgba(31, 24, 16, 0.11);
  border-left: 4px solid rgba(31, 24, 16, 0.13);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.72);
  box-shadow: 0 1px 0 rgba(31, 24, 16, 0.03);
  color: var(--fg-secondary);
  font-size: 14px !important;
  text-decoration: none;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: break-word;
  text-overflow: clip !important;
  overflow: visible !important;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    color 0.12s ease;
}

.sidebar-nav li[data-section="intro"] > a,
.sidebar-nav li[data-section="intro"] > p > a,
.sidebar-nav li[data-section="chat"] > a,
.sidebar-nav li[data-section="chat"] > p > a {
  border-left-color: rgba(7, 138, 82, 0.28);
}

.sidebar-nav li[data-section="cowork"] > a,
.sidebar-nav li[data-section="cowork"] > p > a {
  border-left-color: rgba(208, 138, 17, 0.36);
}

.sidebar-nav li[data-section="code"] > a,
.sidebar-nav li[data-section="code"] > p > a {
  border-left-color: rgba(67, 8, 159, 0.28);
}

.sidebar-nav li[data-section="bonus"] > a,
.sidebar-nav li[data-section="bonus"] > p > a {
  border-left-color: rgba(7, 138, 82, 0.24);
}

.sidebar-nav li[data-section="reference"] > a,
.sidebar-nav li[data-section="reference"] > p > a {
  border-left-color: rgba(31, 24, 16, 0.15);
}

.sidebar-nav li.done > a,
.sidebar-nav li.done > p > a {
  padding-right: 48px;
}

.sidebar-nav .day-label {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--fg-primary);
  margin-bottom: 3px;
  line-height: 1.25;
  transition: color 0.1s ease;
  /* The day-label line ("Lesson N - Category") never carries an
   * underline — only the lesson title line (.ttl) below it does.
   * !important defends against browser :focus / :visited defaults
   * that some browsers re-introduce even when the parent <a> has
   * text-decoration: none. */
  text-decoration: none !important;
}

.sidebar-nav .day-label .num,
.sidebar-nav .day-label .sep,
.sidebar-nav .day-label .cat {
  color: var(--fg-primary);
  font-weight: 700;
  text-decoration: none !important;
}

.sidebar-nav .day-label .sep {
  margin: 0 7px;
  color: var(--fg-tertiary);
  flex: none;
}

.sidebar-nav .day-label .cat {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 20px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar-nav .day-label .num {
  flex: none;
  white-space: nowrap;
}

.sidebar-nav li[data-section="intro"] .day-label .cat,
.sidebar-nav li[data-section="chat"] .day-label .cat {
  color: var(--matcha-800);
}

.sidebar-nav li[data-section="cowork"] .day-label .cat {
  color: var(--lemon-800);
}

.sidebar-nav li[data-section="code"] .day-label .cat {
  color: var(--ube-900);
}

.sidebar-nav li.done > a .day-label::after,
.sidebar-nav li.done > p > a .day-label::after {
  content: '\2713';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 12px;
  right: 12px;
  margin-left: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--matcha-tint);
  color: var(--matcha-800);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  border: 1px solid rgba(7, 138, 82, 0.18);
  line-height: 1;
  flex: none;
}

/* Locked lessons: muted text + small lock glyph after the day label. */
.sidebar-nav li.locked > a .day-label,
.sidebar-nav li.locked > a .day-label .num,
.sidebar-nav li.locked > a .day-label .cat,
.sidebar-nav li.locked > a .ttl,
.sidebar-nav li.locked > p > a .day-label,
.sidebar-nav li.locked > p > a .day-label .num,
.sidebar-nav li.locked > p > a .day-label .cat,
.sidebar-nav li.locked > p > a .ttl {
  color: var(--fg-tertiary);
}

.sidebar-nav li.locked > a .day-label::after,
.sidebar-nav li.locked > p > a .day-label::after {
  content: '';
  display: inline-block;
  margin-left: auto;
  width: 12px;
  height: 14px;
  flex: none;
  background-color: var(--fg-tertiary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'><path d='M3 6V4a3 3 0 0 1 6 0v2h.5A1.5 1.5 0 0 1 11 7.5v5A1.5 1.5 0 0 1 9.5 14h-7A1.5 1.5 0 0 1 1 12.5v-5A1.5 1.5 0 0 1 2.5 6H3zm1.25 0h3.5V4a1.75 1.75 0 0 0-3.5 0v2z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'><path d='M3 6V4a3 3 0 0 1 6 0v2h.5A1.5 1.5 0 0 1 11 7.5v5A1.5 1.5 0 0 1 9.5 14h-7A1.5 1.5 0 0 1 1 12.5v-5A1.5 1.5 0 0 1 2.5 6H3zm1.25 0h3.5V4a1.75 1.75 0 0 0-3.5 0v2z'/></svg>") no-repeat center / contain;
}

.sidebar-nav li.locked > a:hover .day-label,
.sidebar-nav li.locked > a:hover .day-label .num,
.sidebar-nav li.locked > a:hover .day-label .cat,
.sidebar-nav li.locked > a:hover .ttl,
.sidebar-nav li.locked > p > a:hover .day-label,
.sidebar-nav li.locked > p > a:hover .day-label .num,
.sidebar-nav li.locked > p > a:hover .day-label .cat,
.sidebar-nav li.locked > p > a:hover .ttl {
  color: var(--matcha-800);
}

.sidebar-nav li.locked > a:hover .day-label::after,
.sidebar-nav li.locked > p > a:hover .day-label::after {
  background-color: var(--matcha-800);
}

.sidebar-nav .ttl {
  display: block;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--fg-secondary);
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: break-word;
  overflow: visible !important;
  text-overflow: clip !important;
}

.sidebar-nav li > a:hover,
.sidebar-nav li > p > a:hover {
  background: var(--bg-surface);
  border-color: rgba(7, 138, 82, 0.22);
  box-shadow: 0 3px 12px rgba(31, 24, 16, 0.06);
  /* Belt-and-suspenders: kill any inherited text-decoration on the
   * parent <a> at hover time. The base rule sets text-decoration:
   * none without !important, so a Docsify-default or browser-default
   * `a:hover { text-decoration: underline }` could otherwise apply
   * here and bleed into the day-label children. The .ttl child
   * re-asserts its own underline below at higher specificity. */
  text-decoration: none !important;
}

.sidebar-nav li > a:hover .day-label,
.sidebar-nav li > a:hover .ttl,
.sidebar-nav li > p > a:hover .day-label,
.sidebar-nav li > p > a:hover .ttl {
  color: var(--matcha-800);
}

.sidebar-nav li.active > a,
.sidebar-nav li.active > p > a {
  background: var(--reader-mint-soft);
  border-color: rgba(7, 138, 82, 0.34);
  border-left-color: var(--matcha-600);
  box-shadow:
    inset 0 0 0 1px rgba(7, 138, 82, 0.08),
    0 4px 16px rgba(31, 24, 16, 0.06);
}

.sidebar-nav li.active[data-section="cowork"] > a,
.sidebar-nav li.active[data-section="cowork"] > p > a {
  background: var(--reader-gold-soft);
  border-color: rgba(208, 138, 17, 0.34);
  border-left: 4px solid var(--lemon-700);
  box-shadow:
    inset 0 0 0 1px rgba(208, 138, 17, 0.08),
    0 4px 16px rgba(31, 24, 16, 0.06);
}

.sidebar-nav li.active[data-section="code"] > a,
.sidebar-nav li.active[data-section="code"] > p > a {
  background: var(--reader-purple-soft);
  border-color: rgba(67, 8, 159, 0.28);
  border-left: 4px solid var(--ube-800);
  box-shadow:
    inset 0 0 0 1px rgba(67, 8, 159, 0.08),
    0 4px 16px rgba(31, 24, 16, 0.06);
}

.sidebar-nav li.active > a .day-label,
.sidebar-nav li.active > a .day-label .num,
.sidebar-nav li.active > a .day-label .cat,
.sidebar-nav li.active > p > a .day-label,
.sidebar-nav li.active > p > a .day-label .num,
.sidebar-nav li.active > p > a .day-label .cat {
  color: var(--matcha-800);
}

.sidebar-nav li.active[data-section="cowork"] > a .day-label .cat,
.sidebar-nav li.active[data-section="cowork"] > p > a .day-label .cat {
  color: var(--lemon-800);
}

.sidebar-nav li.active[data-section="code"] > a .day-label .cat,
.sidebar-nav li.active[data-section="code"] > p > a .day-label .cat {
  color: var(--ube-900);
}

.sidebar-nav li.active > a .day-label .sep,
.sidebar-nav li.active > p > a .day-label .sep {
  color: var(--matcha-600);
}

.sidebar-nav li.active[data-section="cowork"] > a .day-label .sep,
.sidebar-nav li.active[data-section="cowork"] > p > a .day-label .sep {
  color: var(--lemon-800);
}

.sidebar-nav li.active[data-section="code"] > a .day-label .sep,
.sidebar-nav li.active[data-section="code"] > p > a .day-label .sep {
  color: var(--ube-800);
}

.sidebar-nav li.active > a .ttl,
.sidebar-nav li.active > p > a .ttl {
  color: var(--matcha-800);
  font-weight: 400;
}

/* Legacy markdown section labels */
.sidebar-nav > ul > li > p > strong,
.sidebar-nav > ul > li > strong {
  display: block;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--fg-secondary);
  padding: 18px 12px 6px;
  margin: 0;
}

.sidebar-nav > ul > li > p { margin: 0; }

/* ---------------- MAIN CONTENT ---------------- */

/* Override Docsify's default 60px content padding-top so the progress
 * strip can sit flush against y=0 and have its hairline align with the
 * sidebar wordmark hairline at y=73. The lost 60px is absorbed back
 * into .markdown-section's padding-top below. */
.content {
  background:
    linear-gradient(90deg,
      rgba(250, 249, 247, 0.97) 0%,
      rgba(250, 249, 247, 0.93) 68%,
      rgba(250, 249, 247, 0.84) 100%);
  left: var(--reader-sidebar-width);
  padding-top: 0;
}

.markdown-section {
  max-width: 780px;
  /* Compensates for the .content padding-top removal above. Pages with
   * a progress strip override this to 36px (see .progress-strip rule). */
  padding: 96px 48px;
  color: var(--fg-primary);
  font-size: 17px;
  line-height: 1.65;
}

/* The fixed strip is 73px tall and sits over the top of .content; reserve
 * 73px + 36px of breathing room so content doesn't hide behind it. */
.content.has-progress-strip > .markdown-section {
  padding-top: 109px;
}

/* Appendix and bonus pages don't have a progress strip, so the default
 * 96px top padding leaves an awkward empty band of dotted-grid above
 * the H1. Tighten to 36px so the appendix H1 baseline sits near where
 * the lesson strip's "Lesson N of 24" text sits — appendix content
 * starts at the same visual y-band as lesson content. */
.content:not(.has-progress-strip) > .markdown-section {
  padding-top: 36px;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4 {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-display);
  font-weight: 600;
  letter-spacing: -1.32px;
  color: var(--reader-heading);
  /* 1.2 gives multi-line lesson titles room to breathe — descenders on
   * line 1 no longer crowd ascenders on line 2. Single-line titles are
   * unaffected. */
  line-height: 1.2;
  /* Anchor scroll lands below the sticky 73px progress strip rather than
   * underneath it, so TOC clicks reveal the heading the visitor wanted. */
  scroll-margin-top: 90px;
}

.markdown-section h1 {
  font-size: 44px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
  text-wrap: balance;
}

.markdown-section h2 {
  font-size: 32px;
  margin: 48px 0 14px;
  letter-spacing: -1px;
  /* Lesson titles render as H2 (## Lesson N:); balance the wrap so
   * line lengths land closer to even instead of leaving an orphan
   * word ("What") alone on a line. */
  text-wrap: balance;
}

.markdown-section h3 {
  font-size: 22px;
  margin: 36px 0 12px;
  letter-spacing: -0.5px;
  color: var(--fg-primary);
}

.markdown-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 24px 0 8px;
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 1.08px;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
}

/* Italics in headings tint matcha for a quiet brand accent. */
.markdown-section h1 em,
.markdown-section h2 em,
.markdown-section h3 em {
  color: var(--matcha-600);
  font-style: italic;
}

.markdown-section p,
.markdown-section li {
  font-size: 17px;
  letter-spacing: -0.34px;
}

.markdown-section li + li,
.markdown-section li > ul,
.markdown-section li > ol {
  margin-top: 6px;
}

.markdown-section strong { color: var(--fg-primary); font-weight: 600; }
.markdown-section em { font-style: italic; }

.markdown-section a {
  color: var(--matcha-800);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--matcha-300);
  transition: text-decoration-color 0.15s ease;
}
.markdown-section a:hover { text-decoration-color: var(--matcha-600); }

/* Docsify wraps every heading's leading text run in <a class="anchor">
 * with display: inline-block. inline-block boxes collapse their trailing
 * whitespace at the box edge, which made headings like
 * "Projects on `claude.ai`: ..." render as "Projects onclaude.ai: ..."
 * once the <code> chip became a sibling link. Forcing display: inline
 * preserves the trailing space without affecting the anchor's click
 * target or hover behavior. */
.markdown-section .anchor { display: inline; }

.markdown-section h1 .anchor,
.markdown-section h2 .anchor,
.markdown-section h3 .anchor,
.markdown-section h4 .anchor {
  color: inherit;
  text-decoration: none;
}

.markdown-section h1 .anchor:hover,
.markdown-section h2 .anchor:hover,
.markdown-section h3 .anchor:hover,
.markdown-section h4 .anchor:hover {
  text-decoration: none;
}

.markdown-section hr {
  border: none;
  border-top: 1px dashed var(--border-default);
  margin: 56px 0;
}

/* ---------------- HEADING CHIPS ---------------- */

/* Per-day top chip: "Lesson 17 · Part…" — set by progress.js */
.day-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--matcha-800);
  color: #fff;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.day-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--matcha-300);
}

/* Recurring section labels (Learning objectives / Key takeaways / Knowledge check / Wrap)
   — render as soft swatch panels with a bold left rule, brand-tinted. */
.markdown-section h3[id="learning-objectives"],
.markdown-section h3[id="key-takeaways"],
.markdown-section h3[id="knowledge-check"],
.markdown-section h3[id^="wrap"] {
  position: relative;
  padding: 14px 18px 14px 52px;
  background: var(--reader-mint-soft);
  border-left: 4px solid var(--matcha-600);
  border-radius: 0 12px 12px 0;
  font-size: 14px;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-weight: 700;
  color: var(--matcha-800);
  text-transform: uppercase;
  letter-spacing: 1.08px;
  margin: 40px 0 16px;
}

.markdown-section h3[id="learning-objectives"]::before,
.markdown-section h3[id="key-takeaways"]::before,
.markdown-section h3[id="knowledge-check"]::before {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
}

.markdown-section h3[id="learning-objectives"]::before { content: '◎'; color: var(--matcha-600); }
.markdown-section h3[id="key-takeaways"]::before        { content: '★'; color: var(--matcha-600); }
.markdown-section h3[id="knowledge-check"]::before      { content: '?'; color: var(--matcha-600); font-weight: 700; }

/* Part sub-headings (### Part N.N — Name) */
.markdown-section h3[id^="part-"] {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px dashed var(--border-default);
  text-transform: none;
  letter-spacing: -0.5px;
}

/* ---------------- BLOCKQUOTES / ILLUSTRATIONS ---------------- */

.markdown-section blockquote {
  border-left: 0;
  background: var(--reader-mint-soft);
  border: 1px solid rgba(7, 138, 82, 0.09);
  border-left: 4px solid rgba(7, 138, 82, 0.34);
  padding: 16px 22px;
  margin: 20px 0;
  border-radius: 12px;
  color: var(--fg-secondary);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 16px;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: -0.16px;
}

.markdown-section blockquote.callout-prereq {
  background: var(--reader-gold-soft);
  border-color: rgba(208, 138, 17, 0.16);
  border-left-color: rgba(208, 138, 17, 0.48);
}

.markdown-section blockquote.callout-illustration {
  background: var(--ube-tint);
  border-color: rgba(67, 8, 159, 0.15);
  border-left-color: rgba(67, 8, 159, 0.45);
  color: var(--fg-primary);
}

.markdown-section blockquote p { margin: 0.4em 0; }

/* The caps-label on the first line of a blockquote.
 *
 * Earlier this rule shrunk EVERY <strong> in a blockquote to 11px small-caps,
 * which made body-size lead-ins like "**Mark each lesson complete as you go.**"
 * render as squinty 11px caps that read smaller than the body they were meant
 * to lead. We now scope the small-caps treatment ONLY to the very first <strong>
 * of the very first paragraph in a blockquote — that's where lesson authors put
 * the eyebrow tag (ILLUSTRATION, EXAMPLE, BEFORE YOU START). And we bump it to
 * 16px so the lead-in actually leads the body it precedes.
 *
 * Subsequent <strong> spans inside the same blockquote keep normal bold body
 * styling. Lesson copy should use <strong>...</strong> for visible UI labels
 * and <kbd>...</kbd> only for true keyboard keys.
 */
.markdown-section blockquote > p:first-of-type > strong:first-child,
.markdown-section blockquote > p:first-of-type > em:first-child > strong {
  font-style: normal;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  color: var(--matcha-800);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
}

.markdown-section blockquote.callout-prereq > p:first-of-type > strong:first-child,
.markdown-section blockquote.callout-prereq > p:first-of-type > em:first-child > strong,
.markdown-section blockquote.callout-prereq li > strong:first-child {
  color: var(--lemon-800);
}

.markdown-section blockquote.callout-illustration > p:first-of-type > strong:first-child,
.markdown-section blockquote.callout-illustration > p:first-of-type > em:first-child > strong,
.markdown-section blockquote.callout-illustration li > strong:first-child {
  color: var(--ube-800);
}

/* Bullet-item lead-ins inside a blockquote callout. The author writes:
 *   > - **Mark each lesson complete as you go.** Use the <strong>Mark complete</strong> button…
 * The first <strong> in each <li> becomes the small-caps lead-in,
 * sized to match the body so it actually leads. Subsequent <strong> spans in
 * the same bullet (mid-sentence emphasis) keep normal bold body styling. */
.markdown-section blockquote li > strong:first-child {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  color: var(--matcha-600);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
}

/* ---------------- END-OF-FREE-SECTION UNLOCK CALLOUT ----------------
 * A milestone block that appears at the end of Lesson 5 (and a quieter
 * variant at the end of Lessons 2–4). Visually distinct from teaching
 * callouts: amber/lemon palette to tie back to the landing page's
 * launch-price chip, with a real button CTA inside the blockquote.
 */
.markdown-section blockquote.callout-unlock {
  background: var(--reader-gold-soft);
  border: 1px solid rgba(208, 138, 17, 0.22);
  border-left: 4px solid var(--lemon-700);
  padding: 24px 28px;
  margin: 32px 0 24px;
  border-radius: 14px;
  color: var(--fg-primary);
}
.markdown-section blockquote.callout-unlock > p:first-of-type > strong:first-child,
.markdown-section blockquote.callout-unlock > p:first-of-type > em:first-child > strong,
.markdown-section blockquote.callout-unlock li > strong:first-child {
  color: var(--lemon-800);
}
.markdown-section blockquote.callout-unlock ul {
  margin: 12px 0 18px;
}
.markdown-section blockquote.callout-unlock li {
  margin: 6px 0;
}
.markdown-section blockquote.callout-unlock p.unlock-cta-wrap {
  margin: 18px 0 14px;
}
.markdown-section blockquote.callout-unlock a.unlock-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: #1a1612;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  text-decoration: none;
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 10px 24px -14px rgba(13, 10, 8, 0.5);
  transition:
    background-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}
.markdown-section blockquote.callout-unlock a.unlock-cta:hover,
.markdown-section blockquote.callout-unlock a.unlock-cta:focus-visible {
  background: #0d0a08;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.05),
    0 14px 28px -14px rgba(13, 10, 8, 0.6);
  text-decoration: none;
}
.markdown-section blockquote.callout-unlock em {
  display: block;
  margin-top: 10px;
  color: var(--fg-secondary);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Quiet single-line unlock footer used at the end of Lessons 2–4. */
.markdown-section blockquote.callout-unlock-quiet {
  background: transparent;
  border: 0;
  border-top: 1px dashed rgba(208, 138, 17, 0.55);
  border-radius: 0;
  padding: 14px 0 4px;
  margin: 28px 0 0;
  color: var(--fg-secondary);
  font-size: 14.5px;
  line-height: 1.55;
}
.markdown-section blockquote.callout-unlock-quiet p {
  margin: 0;
}
.markdown-section blockquote.callout-unlock-quiet em { font-style: italic; }
.markdown-section blockquote.callout-unlock-quiet a {
  color: var(--lemon-800);
  text-decoration-color: rgba(208, 138, 17, 0.55);
}
.markdown-section blockquote.callout-unlock-quiet a:hover {
  text-decoration-color: var(--lemon-800);
}

/* Keyboard-key styling only. Visible UI labels in prose use bold text instead
 * of chips; reserve <kbd> for actual keys such as Esc, Cmd, or K. */
.markdown-section kbd {
  display: inline-block;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.35;
  padding: 1px 6px 2px;
  margin: 0 1px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-bottom-color: var(--outlined-stroke);
  border-radius: 5px;
  color: var(--fg-secondary);
  vertical-align: 1px;
  white-space: nowrap;
}

/* ---------------- TABLES ---------------- */

.markdown-section table {
  display: table;
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  margin: 24px 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: 15px;
  box-shadow: var(--shadow-clay);
}

.markdown-section th {
  background: var(--bg-surface-deep);
  color: var(--fg-primary);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.08px;
}

.markdown-section td {
  padding: 12px 16px;
  border-top: 1px dashed var(--border-light);
  vertical-align: top;
  color: var(--fg-secondary);
}

/* Short label-style first columns (e.g. "**Cowork** (Pro)", glossary
 * terms) stay on one line at their natural width; long prose-style first
 * columns (e.g. Appendix C's "Mobile voice input garbles technical terms")
 * wrap. The browser's auto table-layout handles both correctly as long
 * as we don't pin width with nowrap. */
.markdown-section table th:first-child,
.markdown-section table td:first-child {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Non-label columns wrap their content; the browser's auto table-layout
 * decides how to split available width based on each column's intrinsic
 * content size. Don't cap the last column — appendix tables (e.g.,
 * Appendix C Troubleshooting, Appendix D Glossary) and most lesson
 * tables put substantive prose in the rightmost column. */
.markdown-section table td:not(:first-child),
.markdown-section table th:not(:first-child) {
  overflow-wrap: break-word;
  word-break: normal;
}

.markdown-section tr:nth-child(even) td { background: rgba(244, 240, 231, 0.5); }

.markdown-section .dark-reference-table {
  margin: 22px 0 26px;
  overflow-x: auto;
  background: var(--code-bg);
  border: 1px solid rgba(236, 231, 221, 0.14);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-clay);
}

.markdown-section .dark-reference-table table {
  display: table;
  width: 100%;
  margin: 0;
  background: transparent;
  border: 0;
  border-collapse: collapse;
  color: var(--code-fg);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 16px;
  line-height: 1.45;
}

.markdown-section .dark-reference-table th {
  background: rgba(250, 249, 247, 0.07);
  border-bottom: 1px solid rgba(236, 231, 221, 0.18);
  color: #fffdf8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  padding: 16px 18px;
  text-transform: uppercase;
}

.markdown-section .dark-reference-table tr,
.markdown-section .dark-reference-table tr:nth-child(even),
.markdown-section .dark-reference-table tr:nth-child(odd) {
  background: transparent;
}

.markdown-section .dark-reference-table td {
  background: transparent;
  border-top: 1px solid rgba(236, 231, 221, 0.12);
  color: rgba(236, 231, 221, 0.92);
  padding: 16px 18px;
  vertical-align: top;
}

.markdown-section .dark-reference-table tr:nth-child(even) td {
  background: rgba(250, 249, 247, 0.035);
}

.markdown-section .dark-reference-table td:first-child {
  color: #fffdf8;
  font-weight: 700;
}

.markdown-section .dark-process-card {
  margin: 22px 0 26px;
  overflow: hidden;
  background: var(--code-bg);
  border: 1px solid rgba(236, 231, 221, 0.14);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-clay);
  color: var(--code-fg);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
}

.markdown-section .dark-process-step {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 22px;
  padding: 18px 22px;
  border-top: 1px solid rgba(236, 231, 221, 0.12);
}

.markdown-section .dark-process-step:first-child {
  border-top: 0;
}

.markdown-section .dark-process-number {
  align-self: start;
  color: rgba(236, 231, 221, 0.72);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.markdown-section .dark-process-copy {
  display: grid;
  gap: 5px;
  color: rgba(236, 231, 221, 0.88);
  font-size: 17px;
  line-height: 1.5;
}

.markdown-section .dark-process-copy strong {
  color: #fffdf8;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

/* ---------------- CODE ---------------- */

/* Inline code only — scoped away from pre > code so dark code blocks
 * keep their own styling. Font swapped to system mono (SF Mono / Consolas)
 * for narrower, crisper rendering vs Space Mono. Size forced with
 * !important to beat the Docsify Vue theme's low-specificity 0.8em default. */
.markdown-section :not(pre) > code {
  background: #e4ddd0;
  color: #333333;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px !important;
}

.markdown-section :not(pre) > code.inline-code-command {
  background: #eef7f1;
  color: #074c31;
  border: 1px solid #b9dec8;
  box-shadow: inset 0 -1px 0 rgba(122, 182, 143, 0.32);
  font-weight: 620;
}

.markdown-section :not(pre) > code.inline-code-file {
  background: #f7f3ec;
  color: #3d3830;
  border: 1px solid #d8d0c2;
  box-shadow: inset 0 -1px 0 rgba(216, 208, 194, 0.7);
}

.markdown-section :not(pre) > code.inline-code-text {
  background: transparent;
  color: #3d3830;
  border: 0;
  border-bottom: 2px solid #b9aa96;
  border-radius: 0;
  box-shadow: none;
  font-weight: 650;
  padding: 0 2px 1px;
}

.markdown-section table td:first-child > code {
  background: transparent;
  color: var(--fg-primary);
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  font-weight: 700;
}

.is-appendix-route .markdown-section :not(pre) > code {
  background: transparent;
  color: var(--fg-primary);
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  padding: 0;
  font-weight: 500;
}

.is-appendix-route .markdown-section table td:first-child > code {
  font-weight: 700;
}

.is-appendix-b-route .markdown-section table td:nth-child(3) code {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 15px !important;
  line-height: 1.45;
}

.markdown-section .typed-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 3px;
  padding: 2px 0 2px 12px;
  color: #2f3431;
  border-left: 3px solid #d8d0c2;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.markdown-section pre {
  background: var(--code-bg);
  border-radius: var(--radius-card);
  padding: 20px 24px 16px;
  margin: 20px 0;
  overflow-x: auto;
  box-shadow: var(--shadow-clay);
}

/* Visible scrollbar for dark code blocks */
.markdown-section pre::-webkit-scrollbar {
  height: 6px;
}
.markdown-section pre::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
.markdown-section pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}
.markdown-section pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.55);
}

.markdown-section pre > code {
  background: transparent;
  color: var(--code-fg);
  border: none;
  padding: 0 0 24px;
  font-size: 15px !important;
  line-height: 1.65;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.markdown-section pre[data-lang="text"] {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--matcha-300);
  padding-top: 50px;
}

.markdown-section pre[data-lang="text"] > code {
  position: relative;
  z-index: 0;
  display: block;
  color: var(--fg-primary);
}

.markdown-section pre[data-lang]::before {
  content: attr(data-lang);
  display: block;
  color: rgba(250, 249, 247, 0.55);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.markdown-section pre[data-lang="text"]::before {
  content: none;
  display: none;
}

.markdown-section pre[data-lang="text"] .text-block-label {
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 1;
  height: 24px;
  padding: 0 8px;
  background: #e4ddd0;
  border-radius: 5px;
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 24px;
  margin-bottom: 0;
  pointer-events: none;
}

.markdown-section pre[data-lang="text"]::after {
  content: none;
  display: none;
}

/* Docsify copy-code button restyle — small green pill */
.docsify-copy-code-button {
  background: var(--matcha-600) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 4px 10px !important;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.docsify-copy-code-button span {
  font-size: 14px !important;
}

.markdown-section pre:hover .docsify-copy-code-button { opacity: 1; }

/* Hide the Copy button on bare ``` fences. They're informational
 * content — ASCII tables, decision trees, illustrative examples — not
 * code or prompts the student copies. Fences that ARE meant to be
 * copied carry a language hint (```bash, ```markdown, ```json) and
 * keep their button. Prism gives bare fences data-lang="" rather than
 * dropping the attribute, so we match both shapes. */
.markdown-section pre:not([data-lang]) .docsify-copy-code-button,
.markdown-section pre[data-lang=""] .docsify-copy-code-button {
  display: none !important;
}

/* ---------------- GUIDED EXERCISE CARD ----------------
 * Replaces the old "fenced code block as instruction wrapper" pattern.
 * Code fences trigger docsify-copy-code; instructions are not copyable
 * content, so they go in a styled <aside> instead. The literal prompt a
 * student types into Claude lives in a .prompt-card inside this aside,
 * which gets its own scoped Copy button (wired up in index.html).
 */

.markdown-section .exercise {
  background: var(--reader-panel);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 28px 28px 24px;
  margin: 32px 0 24px;
  box-shadow: var(--shadow-clay);
}

/* "Try this →" tag — filled matcha pill, sits half-overlapping the card's
 * top edge so it reads as an action marker for the whole block, not a
 * timid category eyebrow. Filled (not outlined like Mark complete) so it
 * lands one rung louder in the green-action hierarchy. */
.markdown-section .exercise {
  position: relative;
}

/* "Try this →" tag — anchored to the card's top-left corner and pulled up
 * half its own height so it straddles the border. Filled matcha (vs. the
 * outlined Mark complete pill) so it lands one rung louder in the
 * green-action hierarchy. */
.markdown-section .exercise::before {
  content: "Try this →";
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  background: var(--matcha-600);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 12px 6px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-clay);
}

.markdown-section .exercise > ol,
.markdown-section .exercise > ul {
  margin: 0;
  padding-left: 28px;
}

.markdown-section .exercise > ol > li,
.markdown-section .exercise > ul > li {
  margin: 0 0 12px;
  padding-left: 4px;
  line-height: 1.55;
}

.markdown-section .exercise > ol > li:last-child,
.markdown-section .exercise > ul > li:last-child {
  margin-bottom: 0;
}

.markdown-section .exercise > ol > li::marker {
  color: var(--fg-tertiary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.markdown-section .exercise > ol > li > ul,
.markdown-section .exercise > ol > li > ol {
  margin-top: 8px;
  padding-left: 20px;
}

.markdown-section .exercise > ol > li > ul > li {
  margin-bottom: 4px;
}

/* ---------------- PROMPT CARD (lives inside .exercise) ----------------
 * The thing the student literally pastes into Claude. Distinct surface
 * (white-on-cream contrast inside the cream-on-white aside), labeled
 * "Type into Claude:" so the affordance is unambiguous. Copy button is
 * scoped to this element — visible on hover and on focus (so keyboard
 * users can find it).
 */

.markdown-section .prompt-card,
.markdown-section pre.prompt-card {
  position: relative;
  background: var(--bg-surface);
  border: 1.5px solid rgba(48, 38, 27, 0.58);
  border-radius: 10px;
  padding: 48px 18px 16px;
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: 17px;
  letter-spacing: -0.34px;
  line-height: 1.55;
  color: var(--fg-primary);
  box-shadow: none;
  overflow: visible;
}

/* When the prompt content contains markdown chars (## headers, - bullets)
 * the author uses <pre class="prompt-card"> directly so marked.js leaves
 * the literal text alone (type-1 HTML block, blank lines don't break out).
 * The pre wraps long lines instead of horizontally scrolling. */
.markdown-section pre.prompt-card {
  white-space: pre-wrap;
  word-wrap: break-word;
  padding-top: 48px;
}

.markdown-section .exercise > ol + .prompt-card,
.markdown-section .exercise > ul + .prompt-card {
  margin-top: 18px;
}

.markdown-section .prompt-card + .prompt-card,
.markdown-section pre.prompt-card + pre.prompt-card {
  margin-top: 32px;
}

.markdown-section .prompt-card::before {
  content: "Type into Claude";
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: -12px;
  left: 16px;
  height: 24px;
  padding: 0 10px;
  background: var(--bg-surface);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.16px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--matcha-800);
  margin: 0;
}

.markdown-section .prompt-card p {
  margin: 0;
}

.markdown-section .prompt-card p + p {
  margin-top: 10px;
}

/* When a prompt's literal text contains markdown characters that would
 * otherwise be parsed (## headers, - bullets), the author wraps the
 * content in <pre> so marked.js leaves it alone. The pre then has to be
 * un-styled out of its default monospace/box look — we want it to read
 * like the surrounding prose, just with hard line breaks preserved. */
.markdown-section .prompt-card pre {
  background: transparent;
  color: inherit;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  overflow: visible;
  font-family: var(--font-sans);
  font-size: 17px;
  letter-spacing: -0.34px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.prompt-card-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--matcha-600);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 11px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

@media (max-width: 560px) {
  .prompt-card-copy {
    top: 12px;
    right: 12px;
  }
}

.markdown-section .prompt-card:hover .prompt-card-copy,
.prompt-card-copy:focus-visible {
  opacity: 1;
}

.prompt-card-copy.is-copied {
  background: var(--matcha-800);
}

/* Mobile: hover-to-reveal doesn't work on touch — show the button. */
@media (hover: none) {
  .prompt-card-copy { opacity: 1; }
}

/* docsify-copy-code attaches its own Copy button to every <pre>. On
 * prompt-card <pre>s our own scoped button takes over, so suppress the
 * docsify one to avoid the double-button. */
.markdown-section pre.prompt-card > .docsify-copy-code-button {
  display: none !important;
}

/* ---------------- PRINCIPLE CALLOUT ----------------
 * For the recurring teaching maxims a student should memorize
 * (e.g., "tighten the rubric, not the contract"). Lemon-tinted
 * sticky-note surface — visually distinct from the matcha-tinted
 * informational illustration callout and from the green-action
 * exercise card. Authors mark these by hand:
 *
 *   <aside class="principle">
 *
 *   **Tighten the rubric, not the contract.** When a check fails…
 *
 *   </aside>
 *
 * The first <strong> in the first paragraph becomes the headline.
 */

.markdown-section .principle {
  position: relative;
  background: var(--lemon-tint);
  border: 1px solid rgba(208, 138, 17, 0.18);
  border-radius: var(--radius-card);
  padding: 28px 24px 20px;
  margin: 28px 0 24px;
  box-shadow: var(--shadow-clay);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 16px;
  line-height: 1.6;
}

/* "Principle" eyebrow tag — anchored top-left, pulled half its height
 * above the card edge so it straddles the border. Same construction
 * as the "Try this →" pill on the exercise card; lemon (not matcha)
 * so the meaning reads as "remember," not "do." */
.markdown-section .principle::before {
  content: "Principle";
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  background: var(--lemon-700);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 12px 6px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-clay);
}

.markdown-section .principle p { margin: 0.4em 0; }
.markdown-section .principle > p:first-child { margin-top: 0; }
.markdown-section .principle > p:last-child  { margin-bottom: 0; }

/* The opening **Bold sentence.** of a principle reads as the principle
 * itself — bumped up to display weight, dark lemon for a brown-amber
 * that pairs with the tint without competing with the body. */
.markdown-section .principle > p:first-of-type > strong:first-child {
  display: block;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--lemon-800);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

/* ---------------- SIDE-BY-SIDE COMPARE ----------------
 * Two-column "thing A vs thing B" layout for paired content
 * (good/bad, voice/contract, plain/constrained). Authors mark
 * each side with a data-label attribute that becomes a small-caps
 * eyebrow header above each column:
 *
 *   <div class="compare">
 *   <div data-label="Voice (safe)">
 *
 *   - Phrasing in the "Tone & forbid list"
 *   - …
 *
 *   </div>
 *   <div data-label="Contract (do not change)">
 *
 *   - The list of required sections
 *   - …
 *
 *   </div>
 *   </div>
 *
 * Stacks to one column below 720px. Headers stay neutral so the
 * component works for any A-vs-B framing, not just bad-vs-good.
 */

.markdown-section .compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}

.markdown-section .compare > div {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow-clay);
}

.markdown-section .compare > div[data-label]::before {
  content: attr(data-label);
  display: block;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  line-height: 1.25;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.markdown-section .compare > div > p:first-child  { margin-top: 0; }
.markdown-section .compare > div > p:last-child   { margin-bottom: 0; }
.markdown-section .compare > div > ul:first-child,
.markdown-section .compare > div > ol:first-child { margin-top: 0; }
.markdown-section .compare > div > ul:last-child,
.markdown-section .compare > div > ol:last-child  { margin-bottom: 0; }

.markdown-section .compare > div > ul,
.markdown-section .compare > div > ol {
  padding-left: 22px;
}

.markdown-section .compare > div > ul > li,
.markdown-section .compare > div > ol > li {
  margin: 0 0 6px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .markdown-section .compare {
    grid-template-columns: 1fr;
  }
}

/* ---------------- DEFINITION CALLOUT ----------------
 * For first-mention glossary entries — the load-bearing terms
 * a student needs the formal definition of (MCP, worktree, hook,
 * skill, plugin, contract, eval, harness, prefill). Blue-tinted
 * surface that mirrors the .principle construction with a
 * different palette: matcha = action, lemon = remember,
 * ube = illustration, blueberry = definition/reference.
 * Authors mark these by hand:
 *
 *   <aside class="definition">
 *
 *   **MCP — Model Context Protocol.** A standard, well-defined
 *   way for Claude to reach outside its own conversation…
 *
 *   </aside>
 *
 * The first <strong> in the first paragraph is the term + short
 * gloss; the body is the longer explanation.
 */

.markdown-section .definition {
  position: relative;
  background: #eaf3ff;
  border: 1px solid rgba(1, 65, 141, 0.16);
  border-radius: var(--radius-card);
  padding: 28px 24px 20px;
  margin: 28px 0 24px;
  box-shadow: var(--shadow-clay);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 16px;
  line-height: 1.6;
}

/* "Definition" eyebrow tag — same construction as the Principle
 * pill, blue palette so the meaning reads as "formal reference,"
 * not "analogy." */
.markdown-section .definition::before {
  content: "Definition";
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  background: var(--blueberry-800);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 12px 6px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-clay);
}

.markdown-section .definition p { margin: 0.4em 0; }
.markdown-section .definition > p:first-child { margin-top: 0; }
.markdown-section .definition > p:last-child  { margin-bottom: 0; }

/* The opening **Term — short gloss.** of a definition reads as
 * the dictionary headword — display weight, deep blue for the
 * reference tone that pairs with the tint without competing with
 * the body. */
.markdown-section .definition > p:first-of-type > strong:first-child {
  display: block;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--blueberry-800);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

/* ---------------- WARNING CALLOUT ----------------
 * For "do not do this" / "if X happens, escalate" content — the
 * privacy notes, never-paste lists, and hallucination-escalation
 * paragraphs that previously hid as bold lead-ins inside body
 * prose. Pomegranate-tinted surface that completes the color
 * rule: matcha = action, lemon = remember, ube = reference,
 * pomegranate = warning. Authors mark these by hand:
 *
 *   <aside class="warning">
 *
 *   **A word on privacy before you touch real mail.**
 *   Everything you ask the connector to read…
 *
 *   </aside>
 *
 * Headline stays charcoal — the pomegranate pill carries the
 * danger signal so the headline can be readable as content
 * emphasis without competing with the pill. This is what visually
 * differentiates .warning from .principle and .definition (which
 * have colored headlines).
 */

.markdown-section .warning {
  position: relative;
  background: var(--pomegranate-tint);
  border: 1px solid rgba(252, 121, 129, 0.30);
  border-radius: var(--radius-card);
  padding: 28px 24px 20px;
  margin: 28px 0 24px;
  box-shadow: var(--shadow-clay);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 16px;
  line-height: 1.6;
}

.markdown-section .warning::before {
  content: "Warning";
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  background: #d9404b;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 12px 6px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-clay);
}

.markdown-section .warning p { margin: 0.4em 0; }
.markdown-section .warning > p:first-child { margin-top: 0; }
.markdown-section .warning > p:last-child  { margin-bottom: 0; }
.markdown-section .warning > ul:last-child,
.markdown-section .warning > ol:last-child { margin-bottom: 0; }

/* Headline of a warning — bold charcoal, larger than body but
 * uncolored. The pill carries the pomegranate signal alone. */
.markdown-section .warning > p:first-of-type > strong:first-child {
  display: block;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--fg-primary);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

/* ---------------- PAGINATION ---------------- */

.docsify-pagination-container {
  margin: 64px 0 0;
  padding-top: 24px;
  border-top: 1px dashed var(--border-default);
  display: flex;
  gap: 16px;
}

.docsify-pagination-container .pagination-item {
  flex: 1;
  padding: 18px 24px;
  background: var(--bg-surface);
  border-radius: var(--radius-feature);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-clay);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.docsify-pagination-container .pagination-item:hover {
  border-color: var(--matcha-600);
  transform: translateY(-1px);
}

.docsify-pagination-container .pagination-item-label {
  color: var(--fg-secondary);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.08px;
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-weight: 600;
}

.docsify-pagination-container .pagination-item-title {
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

/* ---------------- SEARCH ---------------- */

.search input {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-card) !important;
  padding: 10px 14px !important;
  font-family: var(--font-sans) !important;
  font-feature-settings: var(--otf-body) !important;
  font-size: 14px !important;
  color: var(--fg-primary) !important;
}

.search input:focus {
  border-color: var(--matcha-600) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--matcha-tint) !important;
}

.search .results-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(13, 10, 8, 0.10);
}

.search .matching-post h2 {
  font-family: var(--font-sans) !important;
  font-feature-settings: var(--otf-display);
  font-size: 16px !important;
  letter-spacing: -0.3px;
  color: var(--fg-primary) !important;
}

.search .matching-post em {
  background: var(--matcha-tint);
  color: var(--matcha-800);
  padding: 0 2px;
  font-style: normal;
  border-radius: 2px;
}

/* ---------------- PROGRESS BAR ---------------- */

.progress-strip {
  /* position: fixed (not sticky) because Docsify sets .content to
   * position: absolute, which makes .content the containing block for
   * any sticky descendant — the strip would scroll away with the
   * content. Fixed positions relative to the viewport instead. */
  position: fixed;
  top: 0;
  left: var(--reader-sidebar-width);
  right: 0;
  z-index: 10;
  background: rgba(250, 249, 247, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  /* Pin total height to 73px so the bottom hairline aligns with the
   * sidebar wordmark cell. box-sizing: border-box (set globally) means
   * the 1px border-bottom is included. */
  height: 73px;
  padding: 0 48px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  color: var(--fg-secondary);
}

.progress-strip .progress-count {
  color: var(--fg-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.progress-strip .progress-meta {
  display: inline-flex;
  align-items: center;
  min-width: 148px;
  white-space: nowrap;
}

.progress-strip .progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border-default);
  border-radius: 2px;
  overflow: hidden;
}

.progress-strip .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--matcha-600), var(--ube-800));
  transition: width 0.3s ease;
}

.progress-strip .mark-done {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--outlined-stroke);
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.progress-strip .mark-done:hover {
  border-color: var(--matcha-600);
  color: var(--matcha-800);
}

.progress-strip .mark-done.done {
  background: var(--reader-mint-soft);
  border-color: var(--matcha-600);
  color: var(--matcha-800);
}

/* ---------------- LESSON TOC (right rail) ---------------- */
/* "On this page" navigator. Built by progress.js on lesson pages whose
 * body wasn't cut by the paywall. position: fixed so it doesn't affect
 * the existing layout; hidden below 1280px viewports because there's
 * no horizontal room next to the 780px markdown-section. */

.lesson-toc {
  position: fixed;
  top: 100px;
  right: 32px;
  width: 220px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  z-index: 5;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
}

.lesson-toc-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  padding: 0 0 10px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-default);
}

.lesson-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}

.lesson-toc-list li {
  margin: 0;
  padding: 0;
}

.lesson-toc-list a {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 6px 12px;
  border-left: 2px solid transparent;
  color: var(--fg-secondary);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.lesson-toc-num {
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.1px;
  font-variant-numeric: tabular-nums;
  color: var(--matcha-600);
  white-space: nowrap;
}

.lesson-toc-title {
  display: block;
}

/* End-of-lesson sections (Knowledge Check, Key Takeaways) sit in
 * column 2 so their titles line up with the Part titles above them —
 * otherwise they read as a higher hierarchy than the numbered Parts. */
.lesson-toc-title-only {
  grid-column: 2 / -1;
}

/* Visual break between the numbered Parts and the end-of-lesson
 * coda (Knowledge Check, Key Takeaways). Only the first extra item
 * gets the separator; subsequent extras flow underneath. */
.lesson-toc-list li:not(.lesson-toc-extra) + .lesson-toc-extra {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-default);
}

.lesson-toc-list a:hover {
  color: var(--matcha-800);
  background: var(--reader-mint-hover);
}

.lesson-toc-list a:hover .lesson-toc-num {
  color: var(--matcha-800);
}

.lesson-toc-list a.active {
  color: var(--matcha-800);
  border-left-color: var(--matcha-600);
  font-weight: 600;
}

.lesson-toc-list a.active .lesson-toc-num {
  color: var(--matcha-800);
}

/* Reserve a 280px column on the right so the section never overlaps the
 * TOC. The section is centered within the remaining width via Docsify's
 * default margin: auto. */
.content.has-lesson-toc .markdown-section {
  margin-right: 280px;
}

@media (max-width: 1179px) {
  .lesson-toc { display: none; }
  .content.has-lesson-toc .markdown-section { margin-right: auto; }
}

/* ---------------- DISCLAIMER FOOTER ---------------- */

.site-disclaimer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px dashed var(--border-default);
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-secondary);
}

.site-disclaimer p {
  margin: 0;
  max-width: 720px;
}

.site-disclaimer p + p {
  margin-top: 6px;
}

.site-disclaimer-copyright {
  font-size: 14px;
  color: var(--fg-tertiary);
}

.site-disclaimer strong {
  color: var(--fg-primary);
  font-weight: 600;
}

/* ---------------- UNLOCK CTA CARD ---------------- */
/* Rendered above the markdown content on locked lesson routes by the
 * Docsify afterEach hook in practical-claude/index.html. Visitors still
 * see the lesson body underneath; the gating itself happens at the
 * Cloudflare Worker layer. */

.markdown-section .unlock-card {
  margin: 0 0 32px;
  padding: 28px 32px;
  background:
    linear-gradient(135deg, var(--reader-mint-soft), var(--reader-panel) 68%);
  border: 1px solid #b8d9c6;
  border-radius: 20px;
  display: block;
}

.markdown-section .unlock-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--matcha-800);
}

.markdown-section .unlock-title {
  margin: 8px 0 8px;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.2;
  color: var(--fg-primary);
  border-bottom: 0;
  padding-bottom: 0;
}

.markdown-section .unlock-body {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--warm-charcoal);
  max-width: 620px;
}

/* ---------------- LEAD CAPTURE CARD ---------------- */

.markdown-section .lead-capture-card {
  margin: 38px 0 30px;
  padding: 24px 26px;
  background:
    linear-gradient(135deg, var(--reader-mint-soft), var(--reader-panel) 72%);
  border: 1px solid #b8d9c6;
  border-radius: 20px;
}

.markdown-section .lead-capture-card p {
  margin: 0 0 14px;
  max-width: 620px;
  color: var(--warm-charcoal);
}

.markdown-section .lead-capture-card p:first-child {
  color: var(--matcha-800);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.markdown-section .lead-capture-card h3 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-primary);
  font-size: 25px;
  line-height: 1.18;
  letter-spacing: 0;
}

.markdown-section .lead-capture-card h3::before {
  display: none;
}

.markdown-section .lead-capture-card form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  max-width: 620px;
  margin-top: 16px;
}

.markdown-section .lead-capture-card input[type="email"] {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 12px 14px;
  background: #fff;
  color: var(--fg-primary);
  font: inherit;
  font-size: 15px;
}

.markdown-section .lead-capture-card input[name="company"] {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.markdown-section .lead-capture-card button {
  border: 0;
  border-radius: 999px;
  padding: 12px 17px;
  background: var(--matcha-800);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}

.markdown-section .lead-capture-card button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.markdown-section .lead-capture-status {
  grid-column: 1 / -1;
  min-height: 20px;
  margin: 0;
  color: var(--matcha-800);
  font-size: 13px;
  line-height: 1.4;
}

.markdown-section .lead-capture-status[data-error="true"] {
  color: #9d2b22;
}

@media (max-width: 640px) {
  .markdown-section .lead-capture-card form {
    grid-template-columns: 1fr;
  }
  .markdown-section .lead-capture-card button {
    width: 100%;
  }
}

.markdown-section .unlock-ctas {
  margin: 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.markdown-section .unlock-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.16px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.markdown-section .unlock-btn-primary {
  background: var(--clay-black);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 0;
}
.markdown-section .unlock-btn-primary:hover {
  background: var(--matcha-800);
}

.markdown-section .unlock-btn-ghost {
  background: transparent;
  color: var(--fg-primary);
  padding: 8px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sharp, 6px);
}
.markdown-section .unlock-btn-ghost:hover {
  border-color: var(--matcha-600);
  color: var(--matcha-800);
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 768px) {
  .reader-loading-screen {
    grid-template-columns: 1fr;
  }
  .reader-loading-sidebar {
    display: none;
  }
  .reader-loading-main {
    width: 100%;
    padding: 84px 24px 64px;
  }
  .reader-loading-status {
    font-size: 16px;
  }
  .markdown-section { padding: 24px 20px 64px; font-size: 16px; }
  .markdown-section h1 { font-size: 32px; letter-spacing: -1px; }
  .markdown-section h2 { font-size: 24px; letter-spacing: -0.6px; }
  .markdown-section h3 { font-size: 18px; }
  /* Sidebar is a slide-out drawer on mobile, so the strip spans full
   * viewport width. Compact height for the smaller screen. */
  .progress-strip { left: 0; height: 56px; padding: 0 20px 0 76px; gap: 12px; }
  .progress-strip .progress-meta { min-width: 0; }
  .progress-strip .progress-count { font-size: 16px; }
  .progress-strip .progress-bar { display: none; }
  .content { left: 0; }
  .content.has-progress-strip > .markdown-section { padding-top: 80px; }
  .content:not(.has-progress-strip) > .markdown-section { padding-top: 84px; }
  .sidebar { width: 260px; }
  .sidebar h1.app-name,
  .sidebar .app-name {
    min-height: 72px;
    padding: 16px 18px 14px 70px;
    white-space: normal;
  }
  .sidebar .app-name .app-name-link,
  .sidebar .app-name a {
    display: block;
    font-size: 18px;
    line-height: 1.15;
    white-space: normal;
  }
  .sidebar-toggle,
  body.close .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    bottom: auto;
    left: 12px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 12px;
    background: var(--matcha-600);
    box-shadow:
      0 8px 20px rgba(2, 73, 42, 0.22),
      0 1px 0 rgba(255, 255, 255, 0.24) inset;
    z-index: 40;
  }
  .sidebar-toggle:hover .sidebar-toggle-button {
    opacity: 1;
  }
  .sidebar-toggle span,
  body.close .sidebar-toggle span {
    width: 22px;
    height: 2px;
    margin: 0 0 5px;
    border-radius: 999px;
    background: var(--pure-white);
  }
  .sidebar-toggle span:last-child,
  body.close .sidebar-toggle span:last-child {
    margin-bottom: 0;
  }
  .sidebar-nav .day-label .num { white-space: nowrap; }
  .site-disclaimer { font-size: 14px; margin-top: 48px; }
}

/* ---------------- PRINT ---------------- */
/* ============================================================================
 * Sidebar lock indicators (Phase 5)
 * The Cloudflare Worker enforces the paywall on the markdown fetch — this is
 * just a visual hint so non-buyers see what's gated before they click. The
 * .is-locked class is toggled by the inline Docsify plugin in index.html
 * based on /api/me's response.
 * ============================================================================ */


/* ----- Print stylesheet ----- */
/* Visiting any lesson with ?print=1 auto-opens the print dialog (see index.html plugin).
 * Goal: a clean, paper-friendly version of a single lesson — sidebar, search, sticky
 * progress strip, pagination, copy/mark-done buttons, and the appended footer all hide;
 * body switches to a plain white serif at 11pt with sensible widow/orphan rules. */

@page {
  margin: 0.75in;
}

@media print {
  /* Hide chrome — none of this belongs on paper. */
  .sidebar,
  .sidebar-toggle,
  .search,
  .progress-strip,
  .cover,
  section.cover,
  .docsify-pagination-container,
  .pagination-nav,
  .docsify-copy-code-button,
  .mark-done,
  .share-row,
  footer.site-disclaimer,
  .site-disclaimer,
  body > footer,
  footer {
    display: none !important;
  }

  /* Drop the warm-cream dot grid and any decorative gradient. */
  body {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
    font-family: Georgia, "Iowan Old Style", "Times New Roman", system-ui, serif;
    font-size: 11pt;
    line-height: 1.45;
  }

  body::before {
    display: none !important;
    content: none !important;
  }

  /* Content fills the page — no sidebar offset, no max-width cap. */
  .content {
    position: static !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .markdown-section {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    font-size: 11pt !important;
    line-height: 1.45 !important;
  }

  .markdown-section p,
  .markdown-section li {
    color: #000 !important;
    font-size: 11pt !important;
    letter-spacing: normal !important;
    orphans: 3;
    widows: 3;
  }

  /* Headings keep Manrope (from design-tokens.css) but shrink a notch. */
  .markdown-section h1,
  .markdown-section h2,
  .markdown-section h3,
  .markdown-section h4 {
    color: #000 !important;
    break-after: avoid;
    page-break-after: avoid;
  }

  .markdown-section h1 {
    font-size: 24pt !important;
    margin: 0 0 12pt !important;
    padding-bottom: 8pt !important;
    border-bottom: 1px solid #000 !important;
  }

  .markdown-section h2 {
    font-size: 18pt !important;
    margin: 18pt 0 8pt !important;
  }

  .markdown-section h3 {
    font-size: 14pt !important;
    margin: 14pt 0 6pt !important;
  }

  /* Strip the green chip backgrounds on recurring labels — keep them readable in B&W. */
  .markdown-section h3[id="learning-objectives"],
  .markdown-section h3[id="key-takeaways"],
  .markdown-section h3[id="knowledge-check"],
  .markdown-section h3[id^="wrap"] {
    background: transparent !important;
    border-left: 2px solid #000 !important;
    padding: 4pt 0 4pt 10pt !important;
    color: #000 !important;
    border-radius: 0 !important;
  }

  .markdown-section h3[id="learning-objectives"]::before,
  .markdown-section h3[id="key-takeaways"]::before,
  .markdown-section h3[id="knowledge-check"]::before {
    display: none !important;
  }

  .day-chip {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    padding: 2pt 6pt !important;
  }

  .day-chip::before { display: none !important; }

  /* Code: monochrome, light gray fill, allow page breaks inside long blocks. */
  .markdown-section pre,
  .markdown-section code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 9pt !important;
    color: #000 !important;
    background: #f4f4f4 !important;
    border: 1pt solid #ccc !important;
    box-shadow: none !important;
  }

  .markdown-section code {
    padding: 1pt 3pt !important;
    border-radius: 2pt !important;
  }

  .markdown-section pre {
    padding: 8pt 10pt !important;
    margin: 8pt 0 !important;
    border-radius: 2pt !important;
    page-break-inside: auto;
    break-inside: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .markdown-section pre > code {
    background: transparent !important;
    border: none !important;
    font-size: 9pt !important;
    color: #000 !important;
  }

  .markdown-section pre[data-lang]::before {
    color: #555 !important;
    font-size: 8pt !important;
  }

  /* Blockquotes: drop the matcha tint, keep the left rule. */
  .markdown-section blockquote {
    background: transparent !important;
    border-left: 2pt solid #000 !important;
    color: #000 !important;
    padding: 4pt 10pt !important;
    border-radius: 0 !important;
    page-break-inside: avoid;
  }

  .markdown-section blockquote strong,
  .markdown-section blockquote em strong {
    color: #000 !important;
  }

  /* Tables: simple black borders, no shadow, allow internal page breaks. */
  .markdown-section table {
    background: transparent !important;
    border: 1pt solid #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 10pt !important;
  }

  .markdown-section th {
    background: #eee !important;
    color: #000 !important;
    border-bottom: 1pt solid #000 !important;
    font-size: 10pt !important;
  }

  .markdown-section td {
    color: #000 !important;
    border-top: 1pt solid #ccc !important;
  }

  .markdown-section tr:nth-child(even) td { background: transparent !important; }

  .markdown-section a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* Spell out external URLs in parens after the link text. */
  .markdown-section a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  .markdown-section hr {
    border: none !important;
    border-top: 1pt dashed #999 !important;
    margin: 18pt 0 !important;
  }
}