/*
 * course.content.css — vaayaa.com
 * Course section content rendering styles.
 * All rules scoped under .section-content (added by course.blade.php wrapper).
 *
 * Block inventory (13 types):
 *   lesson | example | summary | definition | tip | warning | note |
 *   quote  | code    | steps   | comparison | faq | label-wrapper
 *
 * Brand:  teal #049f82 | dark-green #0B3D2E | forest #3a5f3a
 * Rule:   Never duplicate these styles via inline style attributes.
 *         All course content appearance is managed exclusively here.
 * ----------------------------------------------------------------
 */

/* ================================================================
   DESIGN TOKENS — CSS custom properties
   Change colour/spacing here; all blocks inherit automatically.
   ================================================================ */
.section-content {
  font-family: 'Noto Sans', sans-serif;
  /* Brand palette */
  --sc-primary:           #049f82;
  --sc-dark:              #0B3D2E;
  --sc-forest:            #3a5f3a;

  /* Block: lesson (main prose) */
  --sc-lesson-border:     #f0f0f0;

  /* Block: example (real-world) */
  --sc-example-accent:    #0ea5e9;
  --sc-example-bg:        #f0f9ff;
  --sc-example-label:     #0369a1;
  --sc-example-text:      #0c4a6e;

  /* Block: summary (quick revision) */
  --sc-summary-accent:    #059669;
  --sc-summary-bg:        #f0fdf4;
  --sc-summary-label:     #065f46;
  --sc-summary-text:      #065f46;

  /* Block: definition (key term) */
  --sc-def-accent:        #6366f1;
  --sc-def-bg:            #eef2ff;
  --sc-def-label:         #3730a3;
  --sc-def-text:          #312e81;

  /* Block: tip (pro tip / best practice) */
  --sc-tip-accent:        #3b82f6;
  --sc-tip-bg:            #eff6ff;
  --sc-tip-label:         #1d4ed8;
  --sc-tip-text:          #1e3a5f;

  /* Block: warning (common mistake / risk) */
  --sc-warn-accent:       #ef4444;
  --sc-warn-bg:           #fef2f2;
  --sc-warn-label:        #991b1b;
  --sc-warn-text:         #7f1d1d;

  /* Block: note (important caution) */
  --sc-note-accent:       #f59e0b;
  --sc-note-bg:           #fffbeb;
  --sc-note-label:        #92400e;
  --sc-note-text:         #451a03;

  /* Block: quote (expert citation) */
  --sc-quote-accent:      #049f82;
  --sc-quote-bg:          #f0fdf9;
  --sc-quote-text:        #134e4a;

  /* Block: code (formula / algorithm) */
  --sc-code-bg:           #0f172a;
  --sc-code-header:       #1e293b;
  --sc-code-accent:       #38bdf8;
  --sc-code-text:         #e2e8f0;

  /* Block: steps */
  --sc-steps-bg:          #f9fafb;
  --sc-steps-border:      #e5e7eb;
  --sc-steps-counter:     #049f82;

  /* Block: comparison */
  --sc-comp-bg:           #f8fafc;
  --sc-comp-border:       #e2e8f0;
  --sc-comp-left-top:     #049f82;
  --sc-comp-right-top:    #ef4444;

  /* Block: faq */
  --sc-faq-border:        #e5e7eb;
  --sc-faq-q:             #0B3D2E;
  --sc-faq-a:             #374151;

  /* Block: label-wrapper */
  --sc-label-color:       #6b7280;
  --sc-label-border:      #e5e7eb;

  /* Shared layout */
  --sc-radius:            8px;
  --sc-pad:               1.25rem 1.5rem;
  --sc-gap:               1.5rem;
  --sc-hdr-gap:           0.5rem;

  /* Typography */
  --sc-text:              #111827;
  --sc-text-2:            #374151;
  --sc-text-muted:        #6b7280;
  --sc-h4:                #0B3D2E;
  --sc-h5:                #3a5f3a;
}

/* ================================================================
   BASE — typography reset inside .section-content
   Overrides Tailwind `prose` where our block styles need control.
   ================================================================ */
.section-content {
  font-family: 'Noto Sans', sans-serif;
  color: var(--sc-text);
  font-size: 1rem;
  line-height: 1.75;
}

.section-content > p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--sc-text-2);
  line-height: 1.8;
}

.section-content > p:last-child { margin-bottom: 0; }

/* Headings */
.section-content h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sc-h4);
  margin: 1.75rem 0 0.75rem;
  line-height: 1.4;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid #e5e7eb;
}

.section-content h5 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sc-h5);
  margin: 1.25rem 0 0.5rem;
  line-height: 1.4;
}

/* Lists */
.section-content ul,
.section-content ol {
  margin: 0.75rem 0 1rem;
  padding-left: 1.5rem;
}

.section-content li {
  margin-bottom: 0.4rem;
  color: var(--sc-text-2);
  line-height: 1.7;
}

.section-content ul li::marker { color: var(--sc-primary); }
.section-content ol li::marker { color: var(--sc-primary); font-weight: 600; }

.section-content strong { color: var(--sc-text); font-weight: 700; }
.section-content em     { color: var(--sc-text-2); }

/* Native blockquote (not .quote block) */
.section-content > blockquote {
  border-left: 4px solid var(--sc-primary);
  background: var(--sc-quote-bg);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
}

.section-content > blockquote p {
  color: var(--sc-quote-text);
  font-style: italic;
  margin: 0;
}

/* Tables */
.section-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.9375rem;
  border: 1px solid #e5e7eb;
  border-radius: var(--sc-radius);
  overflow: hidden;
}

.section-content thead {
  background: var(--sc-dark);
  color: #fff;
}

.section-content thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
}

.section-content tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s ease;
}

.section-content tbody tr:hover   { background: #f9fafb; }
.section-content tbody tr:last-child { border-bottom: none; }

.section-content tbody td {
  padding: 0.75rem 1rem;
  color: var(--sc-text-2);
  vertical-align: top;
}

/* Inline code (outside .code block) */
.section-content :not(.code) > code {
  background: #f1f5f9;
  color: #0f172a;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.875em;
  font-family: 'Courier New', Courier, monospace;
}

/* ================================================================
   SHARED: .content-block-header
   Icon + label row used at the top of every named block.
   ================================================================ */
.section-content .content-block-header {
  display: flex;
  align-items: center;
  gap: var(--sc-hdr-gap);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.875rem;
}

.section-content .content-block-header svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ================================================================
   BLOCK 1: .lesson  — Main educational prose
   White background, subtle border. Primary reading block.
   ================================================================ */
.section-content .lesson {
  background: #fff;
  border: 1px solid var(--sc-lesson-border);
  border-radius: var(--sc-radius);
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .lesson h4 { margin-top: 1rem; }
.section-content .lesson h5 { margin-top: 0.875rem; }

/* ================================================================
   BLOCK 2: .example  — Real-world application
   Sky-blue accent, left bar. Grounds theory in practice.
   ================================================================ */
.section-content .example {
  background: var(--sc-example-bg);
  border-left: 4px solid var(--sc-example-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .example .content-block-header { color: var(--sc-example-label); }
.section-content .example .content-block-header svg { color: var(--sc-example-accent); }
.section-content .example p { color: var(--sc-example-text); }

/* ================================================================
   BLOCK 3: .summary  — Quick Revision
   Green accent. End-of-section retention block.
   ================================================================ */
.section-content .summary {
  background: var(--sc-summary-bg);
  border-left: 4px solid var(--sc-summary-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .summary .content-block-header { color: var(--sc-summary-label); }
.section-content .summary .content-block-header svg { color: var(--sc-summary-accent); }
.section-content .summary ul { margin: 0; padding-left: 1.25rem; }
.section-content .summary li { color: var(--sc-summary-text); font-weight: 500; }
.section-content .summary li::marker { color: var(--sc-summary-accent); }

/* ================================================================
   BLOCK 4: .definition  — Key Term
   Indigo accent. Academic terminology anchor.
   ================================================================ */
.section-content .definition {
  background: var(--sc-def-bg);
  border-left: 4px solid var(--sc-def-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .definition .content-block-header { color: var(--sc-def-label); }
.section-content .definition .content-block-header svg { color: var(--sc-def-accent); }
.section-content .definition p { color: var(--sc-def-text); }

/* ================================================================
   BLOCK 5: .tip  — Pro Tip / Best Practice
   Blue accent. Actionable professional guidance.
   ================================================================ */
.section-content .tip {
  background: var(--sc-tip-bg);
  border-left: 4px solid var(--sc-tip-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .tip .content-block-header { color: var(--sc-tip-label); }
.section-content .tip .content-block-header svg { color: var(--sc-tip-accent); }
.section-content .tip p { color: var(--sc-tip-text); }

/* ================================================================
   BLOCK 6: .warning  — Common Mistake / Risk
   Red accent. Pitfalls and anti-patterns.
   ================================================================ */
.section-content .warning {
  background: var(--sc-warn-bg);
  border-left: 4px solid var(--sc-warn-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .warning .content-block-header { color: var(--sc-warn-label); }
.section-content .warning .content-block-header svg { color: var(--sc-warn-accent); }
.section-content .warning p { color: var(--sc-warn-text); }

/* ================================================================
   BLOCK 7: .note  — Important Note / Caution
   Amber accent. Watch out — subtle but significant.
   ================================================================ */
.section-content .note {
  background: var(--sc-note-bg);
  border-left: 4px solid var(--sc-note-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .note .content-block-header { color: var(--sc-note-label); }
.section-content .note .content-block-header svg { color: var(--sc-note-accent); }
.section-content .note p { color: var(--sc-note-text); }

/* ================================================================
   BACKWARD-COMPATIBLE ALIASES
   Maps old .section-tip / .section-note / .section-warning /
   .section-highlight to the new token system.
   Safe to remove after all DB content uses new class names.
   ================================================================ */
.section-content .section-tip {
  background: var(--sc-tip-bg);
  border-left: 4px solid var(--sc-tip-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .section-warning {
  background: var(--sc-warn-bg);
  border-left: 4px solid var(--sc-warn-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .section-note {
  background: var(--sc-note-bg);
  border-left: 4px solid var(--sc-note-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .section-highlight {
  background: var(--sc-summary-bg);
  border-left: 4px solid var(--sc-summary-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

/* ================================================================
   BLOCK 8: .quote  — Expert Citation / Verified Statistic
   Teal accent. Academic authority and data citation.
   ================================================================ */
.section-content .quote {
  position: relative;
  background: var(--sc-quote-bg);
  border-left: 4px solid var(--sc-quote-accent);
  border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
  padding: 1rem 1.5rem 1rem 2.25rem;
  margin-bottom: var(--sc-gap);
  font-style: italic;
  color: var(--sc-quote-text);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.section-content .quote::before {
  content: '\201C';
  position: absolute;
  top: 0.125rem;
  left: 0.625rem;
  font-size: 3.5rem;
  color: var(--sc-primary);
  opacity: 0.2;
  line-height: 1;
  font-style: normal;
}

.section-content .quote .attribution {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--sc-primary);
}

/* ================================================================
   BLOCK 9: .code  — Formula / Algorithm / Technical Block
   Dark background. Code, formulas, structured data.
   ================================================================ */
.section-content .code {
  background: var(--sc-code-bg);
  border-radius: var(--sc-radius);
  margin-bottom: var(--sc-gap);
  overflow: hidden;
}

.section-content .code .content-block-header {
  background: var(--sc-code-header);
  color: var(--sc-code-accent);
  padding: 0.625rem 1.25rem;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  border-radius: 0;
}

.section-content .code .content-block-header svg { color: var(--sc-code-accent); }

.section-content .code pre {
  margin: 0;
  padding: 1.25rem 1.5rem;
  color: var(--sc-code-text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9375rem;
  line-height: 1.65;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ================================================================
   BLOCK 10: .steps  — Step-by-Step Process
   Neutral background with brand-coloured auto-counters.
   ================================================================ */
.section-content .steps {
  background: var(--sc-steps-bg);
  border: 1px solid var(--sc-steps-border);
  border-radius: var(--sc-radius);
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .steps .content-block-header { color: var(--sc-dark); }
.section-content .steps .content-block-header svg { color: var(--sc-primary); }

.section-content .steps ol {
  list-style: none;
  counter-reset: steps-counter;
  margin: 0;
  padding: 0;
}

.section-content .steps ol li {
  counter-increment: steps-counter;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #e5e7eb;
  color: var(--sc-text-2);
  margin-bottom: 0;
}

.section-content .steps ol li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.section-content .steps ol li::before {
  content: counter(steps-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--sc-steps-counter);
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* ================================================================
   BLOCK 11: .comparison  — Side-by-Side Contrast
   Two-column grid. Stacks to single column on mobile.
   ================================================================ */
.section-content .comparison {
  background: var(--sc-comp-bg);
  border: 1px solid var(--sc-comp-border);
  border-radius: var(--sc-radius);
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .comparison .content-block-header { color: var(--sc-dark); }
.section-content .comparison .content-block-header svg { color: var(--sc-primary); }

.section-content .comparison-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.25rem;
}

.section-content .comparison-col {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 1rem;
}

.section-content .comparison-col.left  { border-top: 3px solid var(--sc-comp-left-top); }
.section-content .comparison-col.right { border-top: 3px solid var(--sc-comp-right-top); }

.section-content .comparison-col-header {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

.section-content .comparison-col.left  .comparison-col-header { color: var(--sc-comp-left-top); }
.section-content .comparison-col.right .comparison-col-header { color: var(--sc-comp-right-top); }

.section-content .comparison-col ul  { margin: 0; padding-left: 1.1rem; }
.section-content .comparison-col li  { font-size: 0.9375rem; margin-bottom: 0.375rem; }

@media (max-width: 640px) {
  .section-content .comparison-table { grid-template-columns: 1fr; }
}

/* ================================================================
   BLOCK 12: .faq  — Frequently Asked Questions
   Q&A pairs with visual Q. prefix and indented answers.
   ================================================================ */
.section-content .faq {
  background: #fff;
  border: 1px solid var(--sc-faq-border);
  border-radius: var(--sc-radius);
  padding: var(--sc-pad);
  margin-bottom: var(--sc-gap);
}

.section-content .faq .content-block-header { color: var(--sc-dark); }
.section-content .faq .content-block-header svg { color: var(--sc-primary); }

.section-content .faq-item {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--sc-faq-border);
}

.section-content .faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.section-content .faq-item:first-child { padding-top: 0; }

.section-content .faq-q {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--sc-faq-q);
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}

.section-content .faq-q::before {
  content: 'Q.';
  color: var(--sc-primary);
  font-weight: 800;
  font-size: 0.875rem;
  flex-shrink: 0;
  margin-top: 0.1em;
}

.section-content .faq-a {
  padding-left: 1.5rem;
  color: var(--sc-faq-a);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ================================================================
   BLOCK 13: .label-wrapper  — Subtopic Transition
   Horizontal rule with centred pill label. Signals sub-section shift.
   ================================================================ */
.section-content .label-wrapper {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 1.5rem 0 1rem;
}

.section-content .label-wrapper::before,
.section-content .label-wrapper::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sc-label-border);
}

.section-content .label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sc-label-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--sc-label-border);
  border-radius: 9999px;
  background: #f9fafb;
}

/* ================================================================
   PROSE OVERRIDE — paragraph reset inside all named blocks
   Prevents Tailwind `prose` double-margins from bleeding in.
   ================================================================ */
.section-content .lesson p,
.section-content .example p,
.section-content .summary p,
.section-content .definition p,
.section-content .tip p,
.section-content .warning p,
.section-content .note p,
.section-content .quote p,
.section-content .steps p,
.section-content .comparison p,
.section-content .faq p,
.section-content .section-tip p,
.section-content .section-warning p,
.section-content .section-note p,
.section-content .section-highlight p {
  margin-top: 0;
  margin-bottom: 0.625rem;
}

.section-content .lesson p:last-child,
.section-content .example p:last-child,
.section-content .summary p:last-child,
.section-content .definition p:last-child,
.section-content .tip p:last-child,
.section-content .warning p:last-child,
.section-content .note p:last-child,
.section-content .quote p:last-child,
.section-content .steps p:last-child,
.section-content .comparison p:last-child,
.section-content .faq p:last-child,
.section-content .section-tip p:last-child,
.section-content .section-warning p:last-child,
.section-content .section-note p:last-child,
.section-content .section-highlight p:last-child {
  margin-bottom: 0;
}

/* Top-level edge spacing */
.section-content > *:first-child { margin-top: 0; }
.section-content > *:last-child  { margin-bottom: 0; }

/* ================================================================
   PRINT  — minimal adaptation for PDF / browser print
   ================================================================ */
@media print {
  .section-content .tip,
  .section-content .warning,
  .section-content .note,
  .section-content .summary,
  .section-content .definition,
  .section-content .section-tip,
  .section-content .section-warning,
  .section-content .section-note,
  .section-content .section-highlight {
    border-left-width: 3px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .section-content .code {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0;
  }

  .section-content .code pre { color: #0f172a !important; }

  .section-content .comparison-table { grid-template-columns: 1fr 1fr; }
}

/* Module header styling in TOC sidebar */
.toc-module-header {
  background: #f3f4f6;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
}
.toc-module-header .toc-module-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #049f82;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.toc-module-header .toc-module-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1f2937;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ============================================================== */
/* PHASE 5: SVG-FREE BLOCK ICONS (class-based, no :has() needed)  */
/* Activated by .phase5-icons body class on post-Phase-5 courses  */
/* Existing 148 courses: unaffected (no body class)               */
/* ============================================================== */

.phase5-icons .content-block-header::before {
  content: "";
  display: inline-block;
  width: 24px; height: 24px;
  margin-right: 8px;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
}

.phase5-icons .lesson .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%2018v-5.25m0%200a6.01%206.01%200%20001.5-.189m-1.5.189a6.01%206.01%200%2001-1.5-.189m3.75%207.478a12.06%2012.06%200%2001-4.5%200m3.75%202.383a14.406%2014.406%200%2001-3%200M14.25%2018v-.192c0-.983.658-1.823%201.508-2.316a7.5%207.5%200%2010-7.517%200c.85.493%201.509%201.333%201.509%202.316V18%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%2018v-5.25m0%200a6.01%206.01%200%20001.5-.189m-1.5.189a6.01%206.01%200%2001-1.5-.189m3.75%207.478a12.06%2012.06%200%2001-4.5%200m3.75%202.383a14.406%2014.406%200%2001-3%200M14.25%2018v-.192c0-.983.658-1.823%201.508-2.316a7.5%207.5%200%2010-7.517%200c.85.493%201.509%201.333%201.509%202.316V18%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .example .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9%2012h3.75M9%2015h3.75M9%2018h3.75m3%20.75H18a2.25%202.25%200%20002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424%2048.424%200%2000-1.123-.08m-5.801%200c-.065.21-.1.433-.1.664%200%20.414.336.75.75.75h4.5a.75.75%200%2000.75-.75%2048.196%2048.196%200%2000-.1-.664m-5.8%200A2.251%202.251%200%200113.5%202.25H15c1.012%200%201.867.668%202.15%201.586m-5.8%200c-.376.023-.75.05-1.124.08C9.095%204.01%208.25%204.973%208.25%206.108V8.25m0%200H4.875c-.621%200-1.125.504-1.125%201.125v11.25c0%20.621.504%201.125%201.125%201.125h9.75c.621%200%201.125-.504%201.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9%2012h3.75M9%2015h3.75M9%2018h3.75m3%20.75H18a2.25%202.25%200%20002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424%2048.424%200%2000-1.123-.08m-5.801%200c-.065.21-.1.433-.1.664%200%20.414.336.75.75.75h4.5a.75.75%200%2000.75-.75%2048.196%2048.196%200%2000-.1-.664m-5.8%200A2.251%202.251%200%200113.5%202.25H15c1.012%200%201.867.668%202.15%201.586m-5.8%200c-.376.023-.75.05-1.124.08C9.095%204.01%208.25%204.973%208.25%206.108V8.25m0%200H4.875c-.621%200-1.125.504-1.125%201.125v11.25c0%20.621.504%201.125%201.125%201.125h9.75c.621%200%201.125-.504%201.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .summary .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9%2012.75L11.25%2015%2015%209.75M21%2012a9%209%200%2011-18%200%209%209%200%200118%200z%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9%2012.75L11.25%2015%2015%209.75M21%2012a9%209%200%2011-18%200%209%209%200%200118%200z%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .tip .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%2018v-5.25m0%200a6.01%206.01%200%20001.5-.189m-1.5.189a6.01%206.01%200%2001-1.5-.189m3.75%207.478a12.06%2012.06%200%2001-4.5%200m3.75%202.383a14.406%2014.406%200%2001-3%200M14.25%2018v-.192c0-.983.658-1.823%201.508-2.316a7.5%207.5%200%2010-7.517%200c.85.493%201.509%201.333%201.509%202.316V18%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%2018v-5.25m0%200a6.01%206.01%200%20001.5-.189m-1.5.189a6.01%206.01%200%2001-1.5-.189m3.75%207.478a12.06%2012.06%200%2001-4.5%200m3.75%202.383a14.406%2014.406%200%2001-3%200M14.25%2018v-.192c0-.983.658-1.823%201.508-2.316a7.5%207.5%200%2010-7.517%200c.85.493%201.509%201.333%201.509%202.316V18%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .note .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M11.25%2011.25l.041-.02a.75.75%200%20011.063.852l-.708%202.836a.75.75%200%20001.063.853l.041-.021M21%2012a9%209%200%2011-18%200%209%209%200%200118%200zm-9-3.75h.008v.008H12V8.25z%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M11.25%2011.25l.041-.02a.75.75%200%20011.063.852l-.708%202.836a.75.75%200%20001.063.853l.041-.021M21%2012a9%209%200%2011-18%200%209%209%200%200118%200zm-9-3.75h.008v.008H12V8.25z%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .definition .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%206.042A8.967%208.967%200%20006%203.75c-1.052%200-2.062.18-3%20.512v14.25A8.987%208.987%200%20016%2018c2.305%200%204.408.867%206%202.292m0-14.25a8.966%208.966%200%20016-2.292c1.052%200%202.062.18%203%20.512v14.25A8.987%208.987%200%200018%2018a8.967%208.967%200%2000-6%202.292m0-14.25v14.25%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%206.042A8.967%208.967%200%20006%203.75c-1.052%200-2.062.18-3%20.512v14.25A8.987%208.987%200%20016%2018c2.305%200%204.408.867%206%202.292m0-14.25a8.966%208.966%200%20016-2.292c1.052%200%202.062.18%203%20.512v14.25A8.987%208.987%200%200018%2018a8.967%208.967%200%2000-6%202.292m0-14.25v14.25%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .warning .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%209v3.75m-9.303%203.376c-.866%201.5.217%203.374%201.948%203.374h14.71c1.73%200%202.813-1.874%201.948-3.374L13.949%203.378c-.866-1.5-3.032-1.5-3.898%200L2.697%2016.126zM12%2015.75h.007v.008H12v-.008z%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%209v3.75m-9.303%203.376c-.866%201.5.217%203.374%201.948%203.374h14.71c1.73%200%202.813-1.874%201.948-3.374L13.949%203.378c-.866-1.5-3.032-1.5-3.898%200L2.697%2016.126zM12%2015.75h.007v.008H12v-.008z%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .comparison .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M7.5%2021L3%2016.5m0%200L7.5%2012M3%2016.5h13.5m0-13.5L21%207.5m0%200L16.5%2012M21%207.5H7.5%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M7.5%2021L3%2016.5m0%200L7.5%2012M3%2016.5h13.5m0-13.5L21%207.5m0%200L16.5%2012M21%207.5H7.5%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .steps .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M8.25%206.75h12M8.25%2012h12m-12%205.25h12M3.75%206.75h.007v.008H3.75V6.75zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200zM3.75%2012h.007v.008H3.75V12zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200zm-.375%205.25h.007v.008H3.75v-.008zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200z%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M8.25%206.75h12M8.25%2012h12m-12%205.25h12M3.75%206.75h.007v.008H3.75V6.75zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200zM3.75%2012h.007v.008H3.75V12zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200zm-.375%205.25h.007v.008H3.75v-.008zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200z%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .quote .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M7.5%208.25h9m-9%203H12m-9.75%201.51c0%201.6%201.123%202.994%202.707%203.227%201.129.166%202.27.293%203.423.379.35.026.67.21.865.501L12%2021l2.755-4.133a1.14%201.14%200%2001.865-.501%2048.172%2048.172%200%20003.423-.379c1.584-.233%202.707-1.626%202.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394%2048.394%200%200012%203c-2.392%200-4.744.175-7.043.513C3.373%203.746%202.25%205.14%202.25%206.741v6.018z%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M7.5%208.25h9m-9%203H12m-9.75%201.51c0%201.6%201.123%202.994%202.707%203.227%201.129.166%202.27.293%203.423.379.35.026.67.21.865.501L12%2021l2.755-4.133a1.14%201.14%200%2001.865-.501%2048.172%2048.172%200%20003.423-.379c1.584-.233%202.707-1.626%202.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394%2048.394%200%200012%203c-2.392%200-4.744.175-7.043.513C3.373%203.746%202.25%205.14%202.25%206.741v6.018z%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .faq .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9.879%207.519c1.171-1.025%203.071-1.025%204.242%200%201.172%201.025%201.172%202.687%200%203.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45%201.827v.75M21%2012a9%209%200%2011-18%200%209%209%200%200118%200zm-9%205.25h.008v.008H12v-.008z%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9.879%207.519c1.171-1.025%203.071-1.025%204.242%200%201.172%201.025%201.172%202.687%200%203.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45%201.827v.75M21%2012a9%209%200%2011-18%200%209%209%200%200118%200zm-9%205.25h.008v.008H12v-.008z%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.phase5-icons .code .content-block-header::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M17.25%206.75L22.5%2012l-5.25%205.25m-10.5%200L1.5%2012l5.25-5.25m7.5-3l-4.5%2016.5%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M17.25%206.75L22.5%2012l-5.25%205.25m-10.5%200L1.5%2012l5.25-5.25m7.5-3l-4.5%2016.5%22%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}


/* ============================================================== */
/* PHASE 5b: TITLE FALLBACK when content-block-header is missing  */
/* Generates "Title · Icon" using ::before on the block itself.   */
/* Backgrounds inherit from existing Block 1-13 rules (no dupes). */
/* ============================================================== */

.phase5-icons .lesson:not(:has(> .content-block-header))::before { content: "Unit"; }
.phase5-icons .example:not(:has(> .content-block-header))::before { content: "Example"; }
.phase5-icons .summary:not(:has(> .content-block-header))::before { content: "Quick Revision"; }
.phase5-icons .tip:not(:has(> .content-block-header))::before { content: "Pro Tip"; }
.phase5-icons .warning:not(:has(> .content-block-header))::before { content: "Caution"; }
.phase5-icons .note:not(:has(> .content-block-header))::before { content: "Note"; }
.phase5-icons .definition:not(:has(> .content-block-header))::before { content: "Definition"; }
.phase5-icons .steps:not(:has(> .content-block-header))::before { content: "Steps"; }
.phase5-icons .comparison:not(:has(> .content-block-header))::before { content: "Comparison"; }
.phase5-icons .code:not(:has(> .content-block-header))::before { content: "Code"; }
.phase5-icons .faq:not(:has(> .content-block-header))::before { content: "FAQ"; }
.phase5-icons .quote:not(:has(> .content-block-header))::before { content: "Quote"; }

/* Shared visual style for fallback titles - match content-block-header look */
.phase5-icons .lesson:not(:has(> .content-block-header))::before,
.phase5-icons .example:not(:has(> .content-block-header))::before,
.phase5-icons .summary:not(:has(> .content-block-header))::before,
.phase5-icons .tip:not(:has(> .content-block-header))::before,
.phase5-icons .warning:not(:has(> .content-block-header))::before,
.phase5-icons .note:not(:has(> .content-block-header))::before,
.phase5-icons .definition:not(:has(> .content-block-header))::before,
.phase5-icons .steps:not(:has(> .content-block-header))::before,
.phase5-icons .comparison:not(:has(> .content-block-header))::before,
.phase5-icons .code:not(:has(> .content-block-header))::before,
.phase5-icons .faq:not(:has(> .content-block-header))::before,
.phase5-icons .quote:not(:has(> .content-block-header))::before {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid currentColor;
  opacity: 0.9;
}

/* Add icon BEFORE the fallback title - reuse existing icon backgrounds */
.phase5-icons .lesson:not(:has(> .content-block-header))::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%206.042A8.967%208.967%200%20006%203.75c-1.052%200-2.062.18-3%20.512v14.25A8.987%208.987%200%20016%2018c2.305%200%204.408.867%206%202.292m0-14.25a8.966%208.966%200%20016-2.292c1.052%200%202.062.18%203%20.512v14.25A8.987%208.987%200%200018%2018a8.967%208.967%200%2000-6%202.292m0-14.25v14.25%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%206.042A8.967%208.967%200%20006%203.75c-1.052%200-2.062.18-3%20.512v14.25A8.987%208.987%200%20016%2018c2.305%200%204.408.867%206%202.292m0-14.25a8.966%208.966%200%20016-2.292c1.052%200%202.062.18%203%20.512v14.25A8.987%208.987%200%200018%2018a8.967%208.967%200%2000-6%202.292m0-14.25v14.25%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: 0 0.125rem; -webkit-mask-position: 0 0.125rem;
  padding-left: 1.75rem;
}
.phase5-icons .tip:not(:has(> .content-block-header))::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%2018v-5.25m0%200a6.01%206.01%200%20001.5-.189m-1.5.189a6.01%206.01%200%2001-1.5-.189m3.75%207.478a12.06%2012.06%200%2001-4.5%200m3.75%202.383a14.406%2014.406%200%2001-3%200M14.25%2018v-.192c0-.983.658-1.823%201.508-2.316a7.5%207.5%200%2010-7.517%200c.85.493%201.509%201.333%201.509%202.316V18%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%2018v-5.25m0%200a6.01%206.01%200%20001.5-.189m-1.5.189a6.01%206.01%200%2001-1.5-.189m3.75%207.478a12.06%2012.06%200%2001-4.5%200m3.75%202.383a14.406%2014.406%200%2001-3%200M14.25%2018v-.192c0-.983.658-1.823%201.508-2.316a7.5%207.5%200%2010-7.517%200c.85.493%201.509%201.333%201.509%202.316V18%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: 0 0.125rem; -webkit-mask-position: 0 0.125rem;
  padding-left: 1.75rem;
}
.phase5-icons .warning:not(:has(> .content-block-header))::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%209v3.75m-9.303%203.376c-.866%201.5.217%203.374%201.948%203.374h14.71c1.73%200%202.813-1.874%201.948-3.374L13.949%203.378c-.866-1.5-3.032-1.5-3.898%200L2.697%2016.126zM12%2015.75h.007v.008H12v-.008z%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%209v3.75m-9.303%203.376c-.866%201.5.217%203.374%201.948%203.374h14.71c1.73%200%202.813-1.874%201.948-3.374L13.949%203.378c-.866-1.5-3.032-1.5-3.898%200L2.697%2016.126zM12%2015.75h.007v.008H12v-.008z%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: 0 0.125rem; -webkit-mask-position: 0 0.125rem;
  padding-left: 1.75rem;
}
.phase5-icons .note:not(:has(> .content-block-header))::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M11.25%2011.25l.041-.02a.75.75%200%20011.063.852l-.708%202.836a.75.75%200%20001.063.853l.041-.021M21%2012a9%209%200%2011-18%200%209%209%200%200118%200zm-9-3.75h.008v.008H12V8.25z%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M11.25%2011.25l.041-.02a.75.75%200%20011.063.852l-.708%202.836a.75.75%200%20001.063.853l.041-.021M21%2012a9%209%200%2011-18%200%209%209%200%200118%200zm-9-3.75h.008v.008H12V8.25z%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: 0 0.125rem; -webkit-mask-position: 0 0.125rem;
  padding-left: 1.75rem;
}
.phase5-icons .definition:not(:has(> .content-block-header))::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%206.042A8.967%208.967%200%20006%203.75c-1.052%200-2.062.18-3%20.512v14.25A8.987%208.987%200%20016%2018c2.305%200%204.408.867%206%202.292m0-14.25a8.966%208.966%200%20016-2.292c1.052%200%202.062.18%203%20.512v14.25A8.987%208.987%200%200018%2018a8.967%208.967%200%2000-6%202.292m0-14.25v14.25%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%206.042A8.967%208.967%200%20006%203.75c-1.052%200-2.062.18-3%20.512v14.25A8.987%208.987%200%20016%2018c2.305%200%204.408.867%206%202.292m0-14.25a8.966%208.966%200%20016-2.292c1.052%200%202.062.18%203%20.512v14.25A8.987%208.987%200%200018%2018a8.967%208.967%200%2000-6%202.292m0-14.25v14.25%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: 0 0.125rem; -webkit-mask-position: 0 0.125rem;
  padding-left: 1.75rem;
}
.phase5-icons .steps:not(:has(> .content-block-header))::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M8.25%206.75h12M8.25%2012h12m-12%205.25h12M3.75%206.75h.007v.008H3.75V6.75zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200zM3.75%2012h.007v.008H3.75V12zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200zm-.375%205.25h.007v.008H3.75v-.008zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200z%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M8.25%206.75h12M8.25%2012h12m-12%205.25h12M3.75%206.75h.007v.008H3.75V6.75zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200zM3.75%2012h.007v.008H3.75V12zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200zm-.375%205.25h.007v.008H3.75v-.008zm.375%200a.375.375%200%2011-.75%200%20.375.375%200%2001.75%200z%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: 0 0.125rem; -webkit-mask-position: 0 0.125rem;
  padding-left: 1.75rem;
}
.phase5-icons .comparison:not(:has(> .content-block-header))::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M7.5%2021L3%2016.5m0%200L7.5%2012M3%2016.5h13.5m0-13.5L21%207.5m0%200L16.5%2012M21%207.5H7.5%22%20%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M7.5%2021L3%2016.5m0%200L7.5%2012M3%2016.5h13.5m0-13.5L21%207.5m0%200L16.5%2012M21%207.5H7.5%22%20%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: 0 0.125rem; -webkit-mask-position: 0 0.125rem;
  padding-left: 1.75rem;
}
.phase5-icons .code:not(:has(> .content-block-header))::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M17.25%206.75L22.5%2012l-5.25%205.25m-10.5%200L1.5%2012l5.25-5.25m7.5-3l-4.5%2016.5%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22currentColor%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M17.25%206.75L22.5%2012l-5.25%205.25m-10.5%200L1.5%2012l5.25-5.25m7.5-3l-4.5%2016.5%22%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: 0 0.125rem; -webkit-mask-position: 0 0.125rem;
  padding-left: 1.75rem;
}

/* ============================================================== */
/* PHASE 5c: ICON + TITLE COLOR PER BLOCK (append-only override)  */
/* Higher specificity via .section-content prefix wins cascade.    */
/* Each rule colors both icon (via currentColor) + title text.    */
/* ============================================================== */

/* --- BASE rules (when Claude includes content-block-header) --- */
.section-content.phase5-icons .lesson .content-block-header::before,
.phase5-icons .section-content .lesson .content-block-header::before { color: var(--sc-dark); }

.section-content.phase5-icons .example .content-block-header::before,
.phase5-icons .section-content .example .content-block-header::before { color: var(--sc-example-accent); }

.section-content.phase5-icons .summary .content-block-header::before,
.phase5-icons .section-content .summary .content-block-header::before { color: var(--sc-summary-accent); }

.section-content.phase5-icons .tip .content-block-header::before,
.phase5-icons .section-content .tip .content-block-header::before { color: var(--sc-tip-accent); }

.section-content.phase5-icons .warning .content-block-header::before,
.phase5-icons .section-content .warning .content-block-header::before { color: var(--sc-warn-accent); }

.section-content.phase5-icons .note .content-block-header::before,
.phase5-icons .section-content .note .content-block-header::before { color: var(--sc-note-accent); }

.section-content.phase5-icons .definition .content-block-header::before,
.phase5-icons .section-content .definition .content-block-header::before { color: var(--sc-def-accent); }

.section-content.phase5-icons .steps .content-block-header::before,
.phase5-icons .section-content .steps .content-block-header::before { color: var(--sc-primary); }

.section-content.phase5-icons .comparison .content-block-header::before,
.phase5-icons .section-content .comparison .content-block-header::before { color: var(--sc-primary); }

.section-content.phase5-icons .code .content-block-header::before,
.phase5-icons .section-content .code .content-block-header::before { color: var(--sc-code-accent); }

.section-content.phase5-icons .faq .content-block-header::before,
.phase5-icons .section-content .faq .content-block-header::before { color: var(--sc-primary); }

.section-content.phase5-icons .quote .content-block-header::before,
.phase5-icons .section-content .quote .content-block-header::before { color: var(--sc-quote-accent); }

/* --- FALLBACK rules (when content-block-header is missing)  --- */
/* Sets both title text color AND icon color via currentColor    */

.section-content.phase5-icons .lesson:not(:has(> .content-block-header))::before,
.phase5-icons .section-content .lesson:not(:has(> .content-block-header))::before { color: var(--sc-dark); }

.section-content.phase5-icons .tip:not(:has(> .content-block-header))::before,
.phase5-icons .section-content .tip:not(:has(> .content-block-header))::before { color: var(--sc-tip-label); }

.section-content.phase5-icons .warning:not(:has(> .content-block-header))::before,
.phase5-icons .section-content .warning:not(:has(> .content-block-header))::before { color: var(--sc-warn-label); }

.section-content.phase5-icons .note:not(:has(> .content-block-header))::before,
.phase5-icons .section-content .note:not(:has(> .content-block-header))::before { color: var(--sc-note-label); }

.section-content.phase5-icons .definition:not(:has(> .content-block-header))::before,
.phase5-icons .section-content .definition:not(:has(> .content-block-header))::before { color: var(--sc-def-label); }

.section-content.phase5-icons .steps:not(:has(> .content-block-header))::before,
.phase5-icons .section-content .steps:not(:has(> .content-block-header))::before { color: var(--sc-dark); }

.section-content.phase5-icons .comparison:not(:has(> .content-block-header))::before,
.phase5-icons .section-content .comparison:not(:has(> .content-block-header))::before { color: var(--sc-dark); }

.section-content.phase5-icons .code:not(:has(> .content-block-header))::before,
.phase5-icons .section-content .code:not(:has(> .content-block-header))::before { color: var(--sc-code-accent); }

/* ============================================================== */
/* PHASE 5d: SPLIT ICON/TEXT - icon in ::before, text in ::after  */
/* Fixes mask-image clipping text in fallback rules.              */
/* Overrides Phase 5b content: "" by moving text to ::after.      */
/* ============================================================== */

/* 1. Remove text from ::before (icon only) */
.phase5-icons .lesson:not(:has(> .content-block-header))::before,
.phase5-icons .tip:not(:has(> .content-block-header))::before,
.phase5-icons .warning:not(:has(> .content-block-header))::before,
.phase5-icons .note:not(:has(> .content-block-header))::before,
.phase5-icons .definition:not(:has(> .content-block-header))::before,
.phase5-icons .steps:not(:has(> .content-block-header))::before,
.phase5-icons .comparison:not(:has(> .content-block-header))::before,
.phase5-icons .code:not(:has(> .content-block-header))::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-bottom: none;
  padding-bottom: 0;
  font-weight: normal;
  font-size: inherit;
}

/* 2. Add title text in ::after (no mask, no clipping) */
.phase5-icons .lesson:not(:has(> .content-block-header))::after { content: "Unit"; color: var(--sc-dark); }
.phase5-icons .tip:not(:has(> .content-block-header))::after { content: "Pro Tip"; color: var(--sc-tip-label); }
.phase5-icons .warning:not(:has(> .content-block-header))::after { content: "Caution"; color: var(--sc-warn-label); }
.phase5-icons .note:not(:has(> .content-block-header))::after { content: "Note"; color: var(--sc-note-label); }
.phase5-icons .definition:not(:has(> .content-block-header))::after { content: "Definition"; color: var(--sc-def-label); }
.phase5-icons .steps:not(:has(> .content-block-header))::after { content: "Steps"; color: var(--sc-dark); }
.phase5-icons .comparison:not(:has(> .content-block-header))::after { content: "Comparison"; color: var(--sc-dark); }
.phase5-icons .code:not(:has(> .content-block-header))::after { content: "Code"; color: var(--sc-code-accent); }
.phase5-icons .faq:not(:has(> .content-block-header))::after { content: "FAQ"; color: var(--sc-dark); }
.phase5-icons .quote:not(:has(> .content-block-header))::after { content: "Quote"; color: var(--sc-quote-accent); }

/* 3. Shared style for ::after title text */
.phase5-icons .lesson:not(:has(> .content-block-header))::after,
.phase5-icons .tip:not(:has(> .content-block-header))::after,
.phase5-icons .warning:not(:has(> .content-block-header))::after,
.phase5-icons .note:not(:has(> .content-block-header))::after,
.phase5-icons .definition:not(:has(> .content-block-header))::after,
.phase5-icons .steps:not(:has(> .content-block-header))::after,
.phase5-icons .comparison:not(:has(> .content-block-header))::after,
.phase5-icons .code:not(:has(> .content-block-header))::after,
.phase5-icons .faq:not(:has(> .content-block-header))::after,
.phase5-icons .quote:not(:has(> .content-block-header))::after {
  display: inline-block;
  font-weight: 700;
  font-size: 0.9375rem;
  vertical-align: middle;
  margin-bottom: 0.625rem;
}

/* 4. Make block a flex/block container so title+content stack vertically */
.phase5-icons .lesson:not(:has(> .content-block-header)),
.phase5-icons .tip:not(:has(> .content-block-header)),
.phase5-icons .warning:not(:has(> .content-block-header)),
.phase5-icons .note:not(:has(> .content-block-header)),
.phase5-icons .definition:not(:has(> .content-block-header)),
.phase5-icons .steps:not(:has(> .content-block-header)),
.phase5-icons .comparison:not(:has(> .content-block-header)),
.phase5-icons .code:not(:has(> .content-block-header)),
.phase5-icons .faq:not(:has(> .content-block-header)),
.phase5-icons .quote:not(:has(> .content-block-header)) {
  position: relative;
  padding-top: 2.5rem;
}

/* 5. Position the icon+title header at the top of the block */
.phase5-icons .lesson:not(:has(> .content-block-header))::before,
.phase5-icons .tip:not(:has(> .content-block-header))::before,
.phase5-icons .warning:not(:has(> .content-block-header))::before,
.phase5-icons .note:not(:has(> .content-block-header))::before,
.phase5-icons .definition:not(:has(> .content-block-header))::before,
.phase5-icons .steps:not(:has(> .content-block-header))::before,
.phase5-icons .comparison:not(:has(> .content-block-header))::before,
.phase5-icons .code:not(:has(> .content-block-header))::before {
  position: absolute;
  top: 0.75rem;
  left: 1.25rem;
}

.phase5-icons .lesson:not(:has(> .content-block-header))::after,
.phase5-icons .tip:not(:has(> .content-block-header))::after,
.phase5-icons .warning:not(:has(> .content-block-header))::after,
.phase5-icons .note:not(:has(> .content-block-header))::after,
.phase5-icons .definition:not(:has(> .content-block-header))::after,
.phase5-icons .steps:not(:has(> .content-block-header))::after,
.phase5-icons .comparison:not(:has(> .content-block-header))::after,
.phase5-icons .code:not(:has(> .content-block-header))::after,
.phase5-icons .faq:not(:has(> .content-block-header))::after,
.phase5-icons .quote:not(:has(> .content-block-header))::after {
  position: absolute;
  top: 0.75rem;
  left: 2.75rem;
}

/* ============================================================== */
/* PHASE 5e: CODE BLOCK CONTENT FALLBACK                          */
/* When Claude uses <p> instead of <pre> inside .code blocks,     */
/* force proper text color, padding, and monospace font.          */
/* ============================================================== */

.section-content .code > p,
.section-content .code > div:not(.content-block-header) {
  margin: 0;
  padding: 1.25rem 1.5rem;
  color: var(--sc-code-text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9375rem;
  line-height: 1.65;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Safety: ANY direct child except headers gets code styling */
.section-content .code > *:not(.content-block-header):not(pre) {
  color: var(--sc-code-text);
  font-family: 'Courier New', Courier, monospace;
}

/* ============================================================== */
/* PHASE 5f: INLINE CODE TAGS IN PROSE                            */
/* Style <code> elements appearing inside paragraphs/lists.       */
/* Does NOT affect .code block (different selector).              */
/* ============================================================== */

.section-content p code,
.section-content li code,
.section-content td code,
.section-content .lesson code,
.section-content .example code,
.section-content .summary code,
.section-content .tip code,
.section-content .warning code,
.section-content .note code,
.section-content .definition code,
.section-content .steps code,
.section-content .comparison code,
.section-content .faq code,
.section-content .quote code {
  display: inline;
  padding: 0.125rem 0.375rem;
  background: rgba(11, 61, 46, 0.08);
  border: 1px solid rgba(11, 61, 46, 0.12);
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  color: var(--sc-dark);
  white-space: nowrap;
  font-weight: 500;
}

/* Inline code inside dark .code block: lighter to stand out */
.section-content .code code {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.2);
  color: var(--sc-code-accent);
}

/* ============================================================== */
/* PHASE 5g: RESTORE LIST STYLES INSIDE COURSE CONTENT           */
/* Tailwind's preflight resets list-style:none site-wide.        */
/* Course content needs proper bullets and numbered lists.       */
/* ============================================================== */

.section-content ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.section-content ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.section-content li {
  margin-bottom: 0.375rem;
  line-height: 1.6;
}

.section-content li:last-child {
  margin-bottom: 0;
}

/* Nested lists get different markers */
.section-content ul ul { list-style-type: circle; }
.section-content ul ul ul { list-style-type: square; }
.section-content ol ol { list-style-type: lower-alpha; }
.section-content ol ol ol { list-style-type: lower-roman; }