/*
 * kb-readable.css — Scholar V2 MV interim "readable document mode" class.
 *
 * Scope: prose content inside /kb/<topic_id> detail view ONLY. Not a chrome
 * stylesheet. Not applied to page headers, nav, chrome, or any other surface.
 * Authority: governance_file id=16 v4 §4.3. Authored for Phase 2 Wave 2
 * (KB-MV-PHASE2-W2), agent-A primary frontend surface.
 *
 * Register posture (interim, pre-bake-off):
 *   - 16px body size, DM Sans family, line-height ~1.6.
 *   - No Instrument Serif. No flight-deck type scale applied to body.
 *   - Minimal markdown: h1-h6, p, ul, ol, li, code, pre, blockquote, hr.
 *   - No custom content-typography components.
 *
 * Chrome/content separability (amendment id=19 v2 constraints 1-5):
 *   1. Layout: content-scoped. No fixed widths, no grid assumptions, no
 *      sibling-of-nav positioning. Caller sets the container width.
 *   2. Background: transparent. The class inherits the surrounding canvas
 *      so it renders correctly on Sovereign's --color-canvas AND on a foreign
 *      MCP-application chrome background.
 *   3. Typography: DM Sans via stack with system-font fallback. Register
 *      integrity holds at fallback (body-sans distinction vs flight-deck mono
 *      elsewhere — neither pretends to be the other).
 *   4. Interactive: no custom interactive affordances at MV (links use
 *      tokens via var(); fallback colors present if token is missing).
 *   5. Motion: no animated transitions. Nothing to degrade.
 *
 * When the prose bake-off concludes (post-launch per §6.4 deadline), this
 * single class is replaced by the bake-off output. No schema change. No
 * migration. The replacement is a CSS-file swap, nothing else.
 */

.kb-readable {
    /* Base typography — 16px, DM Sans, line-height 1.6 */
    font-family: var(--font-body, "DM Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--cream, #F4F1EA);
    /* Layout containment — do NOT impose width; caller decides. */
    max-width: 72ch;
    /* Transparent background — inherits the surrounding canvas. */
    background: transparent;
}

/* ─── Headings ───────────────────────────────────────────────────────── */
/* Deliberately NOT using Instrument Serif. This is readable document mode,
   not flight-deck register. Headings are heavier weight + modest scale. */

.kb-readable h1,
.kb-readable h2,
.kb-readable h3,
.kb-readable h4,
.kb-readable h5,
.kb-readable h6 {
    font-family: inherit;
    font-weight: 600;
    color: inherit;
    margin: 1.5em 0 0.6em;
    line-height: 1.3;
}

.kb-readable h1 { font-size: 1.75em; }
.kb-readable h2 { font-size: 1.4em; }
.kb-readable h3 { font-size: 1.2em; }
.kb-readable h4 { font-size: 1.05em; }
.kb-readable h5 { font-size: 1em; }
.kb-readable h6 { font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.04em; }

.kb-readable h1:first-child,
.kb-readable h2:first-child,
.kb-readable h3:first-child,
.kb-readable h4:first-child {
    margin-top: 0;
}

/* ─── Paragraphs ─────────────────────────────────────────────────────── */

.kb-readable p {
    margin: 0 0 1em;
}

.kb-readable p:last-child {
    margin-bottom: 0;
}

/* ─── Lists ──────────────────────────────────────────────────────────── */

.kb-readable ul,
.kb-readable ol {
    margin: 0 0 1em;
    padding-left: 1.75em;
}

.kb-readable li {
    margin-bottom: 0.35em;
}

.kb-readable li > ul,
.kb-readable li > ol {
    margin: 0.35em 0 0;
}

/* ─── Inline code + code blocks ──────────────────────────────────────── */

.kb-readable code {
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, "SFMono-Regular",
        Menlo, Consolas, monospace);
    font-size: 0.92em;
    padding: 0.12em 0.35em;
    border-radius: 3px;
    background: rgba(127, 127, 127, 0.12);
    color: inherit;
}

.kb-readable pre {
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, "SFMono-Regular",
        Menlo, Consolas, monospace);
    font-size: 0.92em;
    line-height: 1.5;
    padding: 1em 1.1em;
    border-radius: 6px;
    background: rgba(127, 127, 127, 0.12);
    overflow-x: auto;
    margin: 0 0 1em;
}

.kb-readable pre code {
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: inherit;
}

/* ─── Blockquote ─────────────────────────────────────────────────────── */

.kb-readable blockquote {
    margin: 0 0 1em;
    padding: 0.2em 0 0.2em 1em;
    border-left: 3px solid var(--color-line, rgba(127, 127, 127, 0.35));
    color: var(--ink-ghost, #8B8F96);
}

.kb-readable blockquote p:last-child {
    margin-bottom: 0;
}

/* ─── Links ──────────────────────────────────────────────────────────── */

.kb-readable a {
    color: var(--terracotta, #C85A3A);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.kb-readable a:hover,
.kb-readable a:focus {
    text-decoration: none;
}

/* ─── Rules + tables (minimal) ───────────────────────────────────────── */

.kb-readable hr {
    border: none;
    border-top: 1px solid var(--color-line, rgba(127, 127, 127, 0.35));
    margin: 1.5em 0;
}

.kb-readable table {
    border-collapse: collapse;
    margin: 0 0 1em;
}

.kb-readable th,
.kb-readable td {
    padding: 0.4em 0.7em;
    border: 1px solid var(--color-line, rgba(127, 127, 127, 0.35));
    text-align: left;
}

.kb-readable th {
    font-weight: 600;
}