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

/* Long documents. A decision record runs to pages, and Markdig emits bare
   elements that the reset leaves at body size with no spacing, so each gets a
   place on the scale here. Headings stop at --text-3xl because the document's
   title is drawn by the page above the body, and a body h1 louder than it would
   be a second title. */
.md-content > :first-child { margin-top: 0; }
.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4 {
    color: var(--text);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}
.md-content h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); margin: var(--space-18) 0 var(--space-6); }
.md-content h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); margin: var(--space-18) 0 var(--space-5); }
.md-content h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: var(--space-12) 0 var(--space-4); }
.md-content h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: var(--space-10) 0 var(--space-3); }
.md-content li > ul,
.md-content li > ol { margin: var(--space-2) 0 0; }
.md-content a {
    color: var(--text-link);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: var(--space-1);
    transition: text-decoration-color var(--transition);
}
.md-content a:hover { text-decoration-color: currentColor; }
.md-content blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-8);
    border-left: var(--border-accent) solid var(--border-strong);
    color: var(--text-muted);
}
.md-content blockquote p:last-child { margin-bottom: 0; }
.md-content hr {
    margin: var(--space-16) 0;
    border: none;
    border-top: var(--border-width) solid var(--border);
}
.md-content img { border-radius: var(--radius-md); }
/* A code block is the style book's code surface: dark in every theme, like a
   terminal. The inline code rule above would otherwise paint every line of it. */
.md-content pre {
    margin: var(--space-8) 0;
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-lg);
    background: var(--code-bg);
    color: var(--code-text);
    overflow-x: auto;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}
.md-content pre code {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}
/* Wide tables scroll inside themselves rather than widening the page. */
.md-content table {
    display: block;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    margin: var(--space-8) 0;
    font-size: var(--text-base);
}
.md-content th,
.md-content td {
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--border-width) solid var(--border);
    text-align: left;
    vertical-align: top;
}
.md-content th {
    color: var(--text);
    font-weight: var(--weight-semibold);
    border-bottom-width: var(--border-width-thick);
}
.md-content .contains-task-list { list-style: none; padding-left: var(--space-2); }
.md-content .task-list-item-checkbox { margin-right: var(--space-4); accent-color: var(--brand); }
/* A diagram is its source until ckwm-render.js draws it, and stays its source
   when mermaid cannot parse it. Markdig writes the fence as <pre class="mermaid">,
   so the code surface above is taken off again: a drawing sits on the page's own
   ground, and its source reads as muted text rather than as a terminal. */
.md-content .mermaid {
    margin: var(--space-10) 0;
    padding: 0;
    border-radius: 0;
    background: none;
    white-space: pre-wrap;
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.md-content .mermaid:has(> svg) { white-space: normal; text-align: center; }

/* The same content read as a document rather than as a note on a card: one step
   up the scale, looser lines, more air after a paragraph, and the document
   measure. The composer's preview wears it, and so should any page whose one
   job is reading a plan document. */
.md-document {
    max-width: var(--measure-document);
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
}
.md-document p,
.md-document ul,
.md-document ol { margin-bottom: var(--space-8); }
.md-document code { font-size: var(--text-md); }

/* Highlighted code. highlight.js wraps tokens in these classes and ships no
   colours of its own here; every value is a token, so a block follows the theme
   with no script. */
.hljs-comment,
.hljs-quote { color: var(--code-comment); font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag { color: var(--code-keyword); }
.hljs-string,
.hljs-regexp,
.hljs-char,
.hljs-link { color: var(--code-string); }
.hljs-number,
.hljs-symbol,
.hljs-bullet { color: var(--code-number); }
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id { color: var(--code-title); }
.hljs-type,
.hljs-built_in,
.hljs-class,
.hljs-selector-class { color: var(--code-type); }
.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-template-variable,
.hljs-property,
.hljs-params,
.hljs-selector-attr { color: var(--code-attr); }
.hljs-meta,
.hljs-tag,
.hljs-subst { color: var(--code-meta); }
.hljs-addition { color: var(--code-added); }
.hljs-deletion { color: var(--code-removed); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: var(--weight-bold); }


.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; }