/* 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);
}

* { 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. */
body {
  background-color: var(--warm-cream);
  background-image: radial-gradient(rgba(13, 10, 8, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}

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

.sidebar {
  background: var(--warm-cream);
  border-right: 1px solid var(--border-default);
  padding-top: 0;
  width: 320px;
  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; }

.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: 2px 0;
  list-style: none;
}

.sidebar-nav li > a {
  display: block;
  position: relative;
  padding: 9px 14px 10px 16px;
  border-radius: 6px;
  color: var(--fg-secondary);
  text-decoration: none;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: break-word;
  text-overflow: clip !important;
  overflow: visible !important;
  transition: background 0.1s ease, color 0.1s ease;
}

.sidebar-nav .day-label {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 14px;
  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);
}

/* "Completed" pill — green to match the brand accent. */
.sidebar-nav li.done > a .day-label::after {
  content: 'Completed';
  display: inline-block;
  margin-left: auto;
  padding: 2px 9px;
  background: var(--matcha-tint);
  color: var(--matcha-800);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1.4;
  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 {
  color: var(--fg-tertiary);
}

.sidebar-nav li.locked > 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 {
  color: var(--matcha-800);
}

.sidebar-nav li.locked > 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: 13px;
  font-weight: 400;
  line-height: 1.4;
  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 {
  background: rgba(7, 138, 82, 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 {
  color: var(--matcha-800);
}

/* On hover, only the title line picks up the link underline — the
 * day-label above it stays clean (the day-label rule farther up
 * pins text-decoration: none with !important so the hover state
 * here does not reach it). */
.sidebar-nav li > a:hover .ttl {
  text-decoration: underline;
  text-decoration-color: var(--matcha-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sidebar-nav li.active > a {
  background: var(--matcha-tint);
}

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

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

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

.sidebar-nav li.active > a::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 3px;
  height: calc(100% - 20px);
  min-height: 18px;
  background: var(--matcha-600);
  border-radius: 2px;
}

/* Section labels: "Course Lessons", "Bonus", "Reference" */
.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: 12px;
  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: transparent;
  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(--fg-primary);
  /* 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: 12px;
  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 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 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: 11px;
  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(--matcha-tint);
  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: 600;
  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: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  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(--matcha-tint);
  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 p { margin: 0.4em 0; }

/* The "ILLUSTRATION:" / "EXAMPLE:" 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 (lead-ins for bullet
 * items, mid-paragraph emphasis) keep the body's 16px size and pick up the
 * matcha caps treatment via .markdown-section blockquote li > strong:first-child
 * below — that handles bullet lead-ins. Inline button names use <kbd> instead
 * of <strong> so they render as a chip, not a second lead-in.
 */
.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;
}

/* Bullet-item lead-ins inside a blockquote callout. The author writes:
 *   > - **Mark each lesson complete as you go.** Use the <kbd>Mark complete</kbd> button…
 * The first <strong> in each <li> becomes the small-caps matcha 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;
}

/* Inline button-name / UI element chip — Markdown <kbd> tag. Use this in
 * lesson source whenever you name a clickable button, menu item, filename,
 * or keyboard shortcut. Never use **bold** for those — bold inside a
 * blockquote bullet would render as a second small-caps lead-in and compete
 * with the real lead-in.
 *
 *   Press <kbd>Cmd</kbd> + <kbd>K</kbd> to search.
 *   Use the <kbd>Mark complete</kbd> button at the top of every lesson.
 *
 * Visual: matches the real .mark-done button in the progress strip — same
 * Manrope/Roobert face, same pill shape, same outlined-stroke border. Inline
 * references read as tiny versions of the actual chrome button. */
.markdown-section kbd {
  display: inline-block;
  font-family: var(--font-sans);
  font-feature-settings: var(--otf-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  padding: 2px 10px;
  margin: 0 2px;
  background: transparent;
  border: 1px solid var(--outlined-stroke);
  border-radius: 999px;
  color: var(--fg-secondary);
  vertical-align: 1px;
  white-space: nowrap;
}

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

.markdown-section 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: 12px;
  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); }

/* ---------------- 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 pre {
  background: var(--code-bg);
  border-radius: var(--radius-card);
  padding: 20px 24px 32px;
  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;
  font-size: 14px;
  line-height: 1.6;
  font-family: var(--font-mono);
}

.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: 11px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* 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: 12px !important;
  padding: 4px 10px !important;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.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(--bg-surface);
  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: 12px;
  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-page);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 14px 18px 16px;
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: 15px;
  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: 28px;
}

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

.markdown-section .prompt-card::before {
  content: "Type into Claude";
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 8px;
}

.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: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

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

.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: 12px;
  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: 11px;
  font-weight: 700;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin-bottom: 10px;
  padding-bottom: 8px;
  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). Ube-tinted
 * surface that mirrors the .principle construction with a
 * different palette: matcha = action, lemon = remember,
 * ube = 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: var(--ube-tint);
  border: 1px solid rgba(67, 8, 159, 0.15);
  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, ube palette so the meaning reads as "reference," not
 * "remember." */
.markdown-section .definition::before {
  content: "Definition";
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  background: var(--ube-800);
  color: #fff;
  font-size: 12px;
  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 ube for the
 * scholarly 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(--ube-900);
  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: var(--pomegranate-400);
  color: #fff;
  font-size: 12px;
  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: 11px;
  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: 320px;
  right: 0;
  z-index: 10;
  background: rgba(250, 249, 247, 0.85);
  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: 13px;
  color: var(--fg-secondary);
}

.progress-strip .progress-count {
  color: var(--fg-primary);
  font-weight: 600;
}

.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(--matcha-800));
  transition: width 0.3s ease;
}

.progress-strip .mark-done {
  font-family: var(--font-sans);
  font-size: 12px;
  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(--matcha-tint);
  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: 11px;
  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: 13px;
  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: 13px;
  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: rgba(7, 138, 82, 0.04);
}

.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: 12px;
  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: 12px;
  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: var(--matcha-tint);
  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: 12px;
  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;
}

.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) {
  .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; }
  .content.has-progress-strip > .markdown-section { padding-top: 80px; }
  .sidebar { width: 260px; }
  .site-disclaimer { font-size: 12px; 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.
 * ============================================================================ */

.sidebar-nav a.is-locked::before {
  content: "🔒 ";
  opacity: 0.7;
  margin-right: 2px;
}

/* ----- 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;
  }
}