/* ============================================================================
   Typography — prose blocks
   --------------------------------------------------------------------------
   Markdown output, AI reports, help copy and AI explanations. The type SCALE
   itself lives in foundation.css; these are the blocks that consume it.
   ========================================================================== */

.md-content { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); }
.md-content p { margin-bottom: var(--space-3); }
.md-content ol, .md-content ul { padding-left: var(--space-10); margin-bottom: var(--space-3); }
.md-content li { margin-bottom: var(--space-2); }
.md-content code {
    background: var(--code-inline-bg);
    color: var(--code-inline-text);
    padding: var(--space-px) var(--space-2);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-base);
}
.md-content strong { color: var(--text); }


.ai-report-content { line-height: var(--leading-relaxed); }
.ai-report-content h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text);
    margin: var(--space-10) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.ai-report-content h4 {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin: var(--space-8) 0 var(--space-3);
}
.ai-report-content p { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--text-body); margin: var(--space-3) 0; }
.ai-report-content ul { padding-left: var(--space-10); margin-bottom: var(--space-4); }
.ai-report-content li { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); margin: var(--space-2) 0; }
.ai-report-content strong { color: var(--text); }
.ai-report-content code {
    background: var(--code-inline-bg);
    color: var(--code-inline-text);
    padding: var(--space-px) var(--space-2);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-base);
}

/* The book is rendered Markdown, so these are the bare elements Markdig emits.
   h2 is the section heading of the five-question content standard and is the
   most common heading in the book; h3 and h4 are subheads inside a section. */
.help-content h2 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    margin: var(--space-10) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--border-subtle);
    color: var(--text);
}
.help-content h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin: var(--space-8) 0 var(--space-4);
    color: var(--text);
}
.help-content h4 {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    margin: var(--space-6) 0 var(--space-3);
    color: var(--text);
}
.help-content blockquote {
    margin: var(--space-5) 0;
    padding: var(--space-3) var(--space-6);
    border-left: var(--border-width-thick) solid var(--border-strong);
    color: var(--text-muted);
}
.help-content pre {
    background: var(--code-bg);
    color: var(--code-text);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--space-4) 0;
}
.help-content pre code { background: none; color: inherit; padding: 0; font-size: var(--text-sm); }
.help-content p { margin: var(--space-3) 0; line-height: var(--leading-relaxed); color: var(--text-body); }
.help-content ul, .help-content ol { margin: var(--space-3) 0 var(--space-3) var(--space-10); line-height: var(--leading-relaxed); color: var(--text-body); }
.help-content li { margin: var(--space-2) 0; }
.help-content code {
    background: var(--code-inline-bg);
    color: var(--code-inline-text);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-md);
}
.help-content table { margin: var(--space-5) 0; }
.help-content table th {
    text-align: left;
    padding: var(--space-4) var(--space-6);
    background: var(--surface-alt);
    border-bottom: var(--border-width-thick) solid var(--border);
    font-size: var(--text-md);
}
.help-content table td {
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--border-width) solid var(--border);
    font-size: var(--text-md);
}

/* AI explanation output (architecture violations). */
.explain-note {
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
    border: var(--border-width) solid transparent;
}
.explain-note.is-ok { background: var(--success-soft); color: var(--success-on-soft); border-color: var(--success); }
.explain-note.is-warn { background: var(--warning-soft); color: var(--warning-on-soft); border-color: var(--warning); }
.explain-output pre {
    background: var(--code-bg);
    color: var(--code-text);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--space-4) 0;
}
.explain-output pre code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: pre;
    background: none;
    color: inherit;
    padding: 0;
}
.explain-output code {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    background: var(--code-inline-bg);
    color: var(--code-inline-text);
    padding: var(--space-px) var(--space-3);
    border-radius: var(--radius-sm);
}
.explain-output h3, .explain-output h4 { margin: var(--space-6) 0 var(--space-3); }
.explain-output ul, .explain-output ol { margin: var(--space-3) 0 var(--space-3) var(--space-9); }
.explain-output p { margin: var(--space-3) 0; }

/* Plain preformatted text that must keep the body font (AI prose, PR comments). */
.pre-plain { white-space: pre-wrap; font-family: inherit; margin: 0; }