/* Base lesson chrome shared by every lesson in dashboard/public/lessons/.
   Extracted verbatim from 01-macro-ideation.html inline style block (T193.8).
   Single-lesson rules stay inline; classes used in 2+ lessons live here. */

/* T204.1 — LIGHT is now the default theme, matching the landing page
 * (tokens sourced from dashboard/src/landing/tokens/colors.css). DARK is an
 * opt-in override under html[data-theme="dark"] and is BYTE-IDENTICAL to the
 * pre-T204.1 palette, so dark mode looks exactly as it did before. The lime
 * brand accent is unreadable on a cream canvas, so light mode swaps it for the
 * landing violet. */
:root {
  --bg: #F5EFE2; --bg-2: #FAF5EB;
  --ink: #1A1330; --ink-dim: #3A2F56; --ink-faint: #6B5E8A;
  --accent: #5847B0; --p0: #C2362E; --p1: #B5760A; --p2: #3E7A2E;
  /* quiz verdicts: a deep traffic-light green for "correct" that clears AA on
   * cream and reads distinctly from the violet accent, plus a clear red. */
  --correct: #1F7A33; --incorrect: #C2362E;
  --rule: rgba(26,19,48,0.14);
  /* Accent washes consumed by lesson-nav.css (sidebar): the book-CTA hover
     fill + the in-progress dot glow ring. Light = soft violet; dark restores
     lime in the [data-theme="dark"] block below. */
  --accent-wash: rgba(88,71,176,0.10);
  --accent-glow: rgba(88,71,176,0.28);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --serif: 'Fraunces', Georgia, serif;
}

/* Dark mode — restores the original (pre-T204.1) night palette verbatim. */
html[data-theme="dark"] {
  --bg: #0d0e0c; --bg-2: #15171450;
  --ink: #e8e6df; --ink-dim: #d2cfc2; --ink-faint: #aeab9e;
  --accent: #d4ff3a; --p0: #ff5b3a; --p1: #ffb33a; --p2: #6aa84f;
  --correct: #29b94a; --incorrect: #e5484d;
  --rule: #2a2a26;
  --accent-wash: rgba(212,255,58,0.10);
  --accent-glow: rgba(212,255,58,0.25);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 14px; line-height: 1.6; transition: background-color 200ms ease, color 200ms ease; }

/* Respect reduced-motion: kill the theme fade (and any other transitions). */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
body { min-height: 100vh; user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.wrap { max-width: 760px; margin: 0 auto; padding: 56px 28px 120px; position: relative; z-index: 1; }

/* T157.1 tier-0 deterrent. Lesson body is unselectable; code blocks remain selectable. */
pre, code, pre code, .code-wrap pre, .code-wrap code { user-select: text; -webkit-user-select: text; -ms-user-select: text; }

/* T182.4 conversion footer. Body sets user-select:none; this footer re-enables
   it so the CTAs are clickable/selectable. */
.conversion-footer { margin-top: 72px; padding: 32px 0 8px; border-top: 2px solid var(--rule); user-select: text; -webkit-user-select: text; -ms-user-select: text; }
.conversion-footer .cf-label { font-size: 10px; letter-spacing: 0.25em; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
.conversion-footer h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); margin: 0 0 8px; text-transform: none; letter-spacing: -0.01em; }
.conversion-footer .cf-lede { color: var(--ink-dim); font-size: 13px; margin-bottom: 22px; }
.conversion-footer .cf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.conversion-footer a.cf-card { display: block; text-decoration: none; color: var(--ink); border: 1px solid var(--rule); border-radius: 2px; background: var(--bg-2); padding: 18px 16px; transition: border-color 120ms ease, background 120ms ease; user-select: text; -webkit-user-select: text; }
.conversion-footer a.cf-card:hover { border-color: var(--accent); background: rgba(88,71,176,0.05); }
.conversion-footer a.cf-card .cf-card-tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 8px; }
.conversion-footer a.cf-card .cf-card-title { font-weight: 700; font-size: 14px; display: block; margin-bottom: 4px; }
.conversion-footer a.cf-card .cf-card-sub { color: var(--ink-faint); font-size: 12px; line-height: 1.45; }
@media (max-width: 640px) { .conversion-footer .cf-grid { grid-template-columns: 1fr; } }

.watermark-banner { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.08em; padding: 6px 0 18px; margin-bottom: 14px; user-select: none; -webkit-user-select: none; opacity: 0.85; }

header.lesson-head { margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.crumb { color: var(--ink-faint); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; }
.crumb .dot { color: var(--accent); }
h1.title { font-family: var(--serif); font-weight: 900; font-size: clamp(36px, 5.5vw, 56px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 22px; }
h1.title em { font-style: italic; color: var(--accent); font-weight: 400; }
.lede { color: var(--ink-dim); font-size: 14.5px; }
.lede strong { color: var(--ink); font-weight: 500; }
.meta-row { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.12em; }
.meta-row span b { color: var(--accent); font-weight: 500; }

/* phase-map + phase-shift widget styles (T193.1 extraction preserved). */
.phase-map { border: 1px solid var(--rule); border-radius: 2px; padding: 16px 18px; margin-top: 28px; background: var(--bg-2); font-family: var(--mono); font-size: 12px; color: var(--ink-dim); line-height: 1.5; }
.phase-map .pm-label { font-size: 10px; letter-spacing: 0.25em; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; }
.phase-map .pm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.phase-map .pm-row:last-child { margin-bottom: 0; }
.phase-map .pm-row-label { font-size: 10px; letter-spacing: 0.15em; color: var(--ink-faint); text-transform: uppercase; min-width: 60px; }
.phase-map .pm-step { color: var(--ink-faint); padding: 2px 6px; border: 1px solid transparent; border-radius: 2px; }
.phase-map .pm-step.now { color: var(--accent); border-color: var(--accent); background: rgba(88,71,176,0.08); font-weight: 700; }
.phase-map .pm-arrow { color: var(--ink-faint); }
.phase-map .pm-note { font-size: 11px; color: var(--ink-faint); margin-top: 10px; font-style: italic; }

.phase-shift { border-left: 3px solid var(--accent); background: rgba(88,71,176,0.04); padding: 14px 18px; margin: 32px 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; }
.phase-shift .ps-label { font-size: 10px; letter-spacing: 0.25em; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; font-weight: 700; }
.phase-shift b { color: var(--ink); }

section.curriculum-intro { margin: 0 0 56px; padding-bottom: 40px; border-bottom: 2px solid var(--rule); }
.curriculum-title { font-family: var(--serif); font-weight: 900; font-size: clamp(36px, 5.5vw, 56px); line-height: 1; letter-spacing: -0.02em; color: var(--accent); margin-bottom: 22px; }
.curriculum-lede { color: var(--ink); font-size: 15px; line-height: 1.65; margin-bottom: 14px; }
.curriculum-lede:last-child { margin-bottom: 0; }
.curriculum-lede strong { color: var(--accent); font-weight: 600; }

section { margin: 64px 0; scroll-margin-top: 24px; }
.section-num { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.2em; margin-bottom: 8px; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 20px; }
h3 { font-family: var(--mono); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin: 28px 0 10px; }
.step-meta { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }

p { margin-bottom: 14px; color: var(--ink); }
p.dim { color: var(--ink-dim); }

.pull { font-family: var(--serif); font-size: 19px; font-style: italic; font-weight: 400; line-height: 1.4; color: var(--ink); border-left: 2px solid var(--accent); padding: 4px 0 4px 20px; margin: 24px 0; }
.pull.small { font-size: 16px; }

pre, code { font-family: var(--mono); }
.code-wrap { position: relative; margin: 22px 0 16px; }
.code-wrap pre { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 2px; padding: 44px 20px 18px; font-size: 12px; overflow-x: auto; color: var(--ink); margin: 0; white-space: pre-wrap; word-wrap: break-word; }
.code-wrap .code-label { position: absolute; top: -9px; left: 14px; background: var(--bg); padding: 0 8px; font-size: 10px; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; z-index: 2; }
.copy-btn { position: absolute; top: 10px; right: 10px; background: var(--bg); color: var(--ink-dim); border: 1px solid var(--rule); border-radius: 2px; font-family: var(--mono); font-size: 10px; padding: 5px 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: all 0.15s; z-index: 3; }
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn.done { color: var(--p2); border-color: var(--p2); }

code.inline { background: var(--bg-2); border: 1px solid var(--rule); padding: 1px 6px; border-radius: 2px; font-size: 12px; word-break: break-all; }

.viz { margin: 28px 0; border: 1px solid var(--rule); background: var(--bg-2); border-radius: 2px; padding: 28px 20px 20px; position: relative; }
.viz-label { position: absolute; top: -9px; left: 14px; background: var(--bg); padding: 0 8px; font-size: 10px; color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; }
.viz .caption { font-size: 11px; color: var(--ink-faint); margin: 16px 0 0; font-style: italic; }

ul.bare { list-style: none; }
ul.bare li { padding: 8px 0; border-bottom: 1px dashed var(--rule); display: flex; gap: 14px; align-items: flex-start; }
ul.bare li:last-child { border-bottom: none; }
ul.bare li::before { content: "→"; color: var(--accent); font-weight: 700; flex-shrink: 0; }
ul.bare li b { color: var(--ink); font-weight: 500; }

/* T214.2: numbered "ideation steps in order" flow (replaces the funky bare list). */
ol.ideation-steps { list-style: none; counter-reset: istep; margin: 22px 0 8px; padding: 0; }
ol.ideation-steps li { position: relative; counter-increment: istep; padding: 0 0 24px 52px; }
ol.ideation-steps li::before { content: counter(istep); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--accent); background: var(--accent-wash); border: 1px solid var(--accent); }
ol.ideation-steps li::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 1px; background: var(--rule); }
ol.ideation-steps li:last-child { padding-bottom: 0; }
ol.ideation-steps li:last-child::after { display: none; }
ol.ideation-steps .is-lead { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
ol.ideation-steps p { margin: 0; color: var(--ink-dim); font-size: 13px; line-height: 1.55; }

ul.checklist { list-style: none; }
ul.checklist li { padding: 6px 0; padding-left: 22px; position: relative; color: var(--ink-dim); font-size: 12.5px; }
ul.checklist li::before { content: "□"; position: absolute; left: 0; color: var(--accent); font-size: 14px; line-height: 1; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.pill.p0 { background: rgba(255,91,58,0.15); color: var(--p0); border: 1px solid var(--p0); }
.pill.p1 { background: rgba(255,179,58,0.15); color: var(--p1); border: 1px solid var(--p1); }
.pill.p2 { background: rgba(106,168,79,0.15); color: var(--p2); border: 1px solid var(--p2); }

.step { padding: 22px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 64px 1fr; gap: 20px; }
.step:last-child { border-bottom: 1px solid var(--rule); }
.step-num { font-family: var(--serif); font-size: 44px; font-weight: 900; line-height: 0.9; color: var(--accent); letter-spacing: -0.04em; }
.step h4 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }

.prompt-box { border: 1px solid var(--accent); background: rgba(88,71,176,0.03); padding: 18px 20px; border-radius: 2px; margin: 20px 0; }
.prompt-box .ptag { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.prompt-box .qq { font-family: var(--serif); font-size: 17px; font-style: italic; margin: 0; }

/* Callout: accent-bordered aside for asides, tips, and worked-example notes.
   Canonical version lifted from the inline copies in L02a and L03 (T202.2);
   those inline copies stay this sprint, so the treatment must match exactly.
   The T202 worked-example callouts on L01 and L02 rely on this rule. */
.callout {
  border: 1px solid var(--accent);
  background: rgba(88,71,176,0.05);
  padding: 18px 22px;
  border-radius: 2px;
  margin: 28px 0;
}
.callout .co-label { font-size: 10px; letter-spacing: 0.25em; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; font-weight: 700; }
.callout p { margin-bottom: 10px; font-size: 13.5px; }
.callout p:last-child { margin-bottom: 0; }

/* Case-study variant for worked-example callouts: swaps the full accent border
   for a single thick left rule plus a quieter neutral panel, so a "here is the
   work" callout reads as a distinct, calmer beat next to the brighter default
   accent callouts. The label keeps its accent color as the one bright anchor. */
.callout.case-study {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
}

.next-up { margin-top: 56px; padding: 24px; border: 1px solid var(--rule); background: var(--bg-2); border-radius: 2px; }
.next-up .nu-label { font-size: 10px; letter-spacing: 0.25em; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
.next-up h3 { color: var(--ink); margin: 0 0 14px; font-size: 17px; text-transform: none; letter-spacing: 0; font-family: var(--serif); font-weight: 600; }
.next-up .nu-row { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--rule); font-size: 13px; }
.next-up .nu-row b { color: var(--accent); }
.next-up a.nu-row { color: var(--ink); text-decoration: none; transition: background 120ms ease; }
.next-up a.nu-row:hover { background: rgba(88, 71, 176, 0.05); }
.next-up a.nu-row:hover b { text-decoration: underline; }

svg { display: block; width: 100%; height: auto; }
svg text { font-family: 'JetBrains Mono', monospace; }

/* T213.1 — raster lesson images render at their intrinsic width (L02's
 * landing-redesign-after.webp is 1000px wide) and blow the viewport out on a
 * phone (measured 649px of horizontal overflow at 390px). Clamp every raster
 * image to its container and keep the aspect ratio. The lone inline-styled
 * image (L07) already sets a tighter max-width, which wins on specificity. */
img { max-width: 100%; height: auto; }

/* T204.1 — light-mode SVG diagram remaps. The 18 inline SVG diagrams across
 * the lessons hardcode their colors as fill=/stroke= presentation attributes,
 * tuned for the dark canvas. A CSS rule beats a presentation attribute, so
 * these rules re-color the diagrams for the cream canvas WITHOUT touching any
 * SVG markup. Scoped to :root:not([data-theme="dark"]) so dark mode keeps the
 * raw hex untouched. Both a fill and a stroke rule per source color.
 * Semantic map (dark hex -> light replacement):
 *   #d4ff3a brand lime/accent -> #5847B0 violet
 *   #e8e6df body ink text     -> #1A1330
 *   #aeab9e faint tertiary     -> #6B5E8A
 *   #8a8a82 dim secondary/arrow-> #5A5570 (darker, clears AA on cream)
 *   #4a4a44 faint rule lines   -> rgba(26,19,48,0.30)
 *   #2a2a26 rule/border        -> rgba(26,19,48,0.14)
 *   #ff5b3a p0/danger          -> #C2362E
 *   #6aa84f p2/success         -> #3E7A2E
 *   #0d0e0c / #0a0a08 near-black text-on-accent -> #F5EFE2 (now sits on violet)
 *   #ff7a7a soft danger        -> #C2362E
 *   #ffffff white text-on-light -> #1A1330 */
:root:not([data-theme="dark"]) svg [fill="#d4ff3a"] { fill: #5847B0; }
:root:not([data-theme="dark"]) svg [stroke="#d4ff3a"] { stroke: #5847B0; }
:root:not([data-theme="dark"]) svg [fill="#e8e6df"] { fill: #1A1330; }
:root:not([data-theme="dark"]) svg [stroke="#e8e6df"] { stroke: #1A1330; }
:root:not([data-theme="dark"]) svg [fill="#aeab9e"] { fill: #6B5E8A; }
:root:not([data-theme="dark"]) svg [stroke="#aeab9e"] { stroke: #6B5E8A; }
:root:not([data-theme="dark"]) svg [fill="#8a8a82"] { fill: #5A5570; }
:root:not([data-theme="dark"]) svg [stroke="#8a8a82"] { stroke: #5A5570; }
:root:not([data-theme="dark"]) svg [fill="#4a4a44"] { fill: rgba(26,19,48,0.30); }
:root:not([data-theme="dark"]) svg [stroke="#4a4a44"] { stroke: rgba(26,19,48,0.30); }
:root:not([data-theme="dark"]) svg [fill="#2a2a26"] { fill: rgba(26,19,48,0.14); }
:root:not([data-theme="dark"]) svg [stroke="#2a2a26"] { stroke: rgba(26,19,48,0.14); }
:root:not([data-theme="dark"]) svg [fill="#ff5b3a"] { fill: #C2362E; }
:root:not([data-theme="dark"]) svg [stroke="#ff5b3a"] { stroke: #C2362E; }
:root:not([data-theme="dark"]) svg [fill="#6aa84f"] { fill: #3E7A2E; }
:root:not([data-theme="dark"]) svg [stroke="#6aa84f"] { stroke: #3E7A2E; }
:root:not([data-theme="dark"]) svg [fill="#0d0e0c"] { fill: #F5EFE2; }
:root:not([data-theme="dark"]) svg [stroke="#0d0e0c"] { stroke: #F5EFE2; }
:root:not([data-theme="dark"]) svg [fill="#0a0a08"] { fill: #F5EFE2; }
:root:not([data-theme="dark"]) svg [stroke="#0a0a08"] { stroke: #F5EFE2; }
:root:not([data-theme="dark"]) svg [fill="#ff7a7a"] { fill: #C2362E; }
:root:not([data-theme="dark"]) svg [stroke="#ff7a7a"] { stroke: #C2362E; }
:root:not([data-theme="dark"]) svg [fill="#ffffff"] { fill: #1A1330; }
:root:not([data-theme="dark"]) svg [stroke="#ffffff"] { stroke: #1A1330; }

@media (max-width: 640px) {
  .wrap { padding: 32px 18px 80px; }
  .step { grid-template-columns: 1fr; gap: 6px; }
  .step-num { font-size: 32px; }
  .meta-row { gap: 14px; }
  .next-up .nu-row { grid-template-columns: 1fr; gap: 4px; }

  /* T213.1 — mono body density: nudge the base size up a touch and loosen the
   * line-height so the monospace body reads comfortably on a phone. Desktop
   * keeps 14px / 1.6 (this lives only inside the mobile query). */
  body { font-size: 15px; line-height: 1.72; }

  /* T213.1 — the copy button is a ~22px sliver on desktop; give it a 44px tap
   * height on mobile and center its label within the taller box. */
  .copy-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}