/* ============================================================
 * STM Design System — Rich-text content + insertable blocks
 * ============================================================
 * Issue #627 follow-up. Two things live here, and both are PUBLIC:
 *
 *   1. `.stm-richtext` — the type ramp for EDITED HTML: headings,
 *      paragraphs, lists, blockquotes, code, tables, rules, images,
 *      links. Applied to the editing surface AND the preview.
 *
 *   2. `.stm-blk-*` — the insertable DS block vocabulary (callouts,
 *      call-to-action links). A curated set the admin can insert
 *      into the copy, not arbitrary components.
 *
 * ── WHY THIS SHEET IS UNSCOPED, AND MUST STAY THAT WAY ──
 *
 * Blazor CSS isolation stamps its scope attribute on the elements a
 * .razor file DECLARES, at compile time. The content of a
 * contentEditable is created by the browser and the user at RUNTIME,
 * so it carries no scope attribute at all. A scoped rule for `h1`
 * inside the editor therefore matches NOTHING — silently, with the
 * markup inspecting as correct.
 *
 * That is issue #639's trap, and it applies to our own component
 * exactly as it applies to a consumer's. So the content ramp cannot
 * live in StmRichTextEditor.razor.css; it lives here, loaded
 * globally, keyed off a plain class.
 *
 * ── WHY THE BLOCK CLASSES ARE `stm-blk-` AND NOT `stm-c-` ──
 *
 * `stm-c-*` is a component's PRIVATE implementation and most of those
 * names are scoped (`.stm-c-alert[b-i3ovj3psul]`). Injecting
 * `class="stm-c-alert"` into editor content would style nothing, for
 * the same reason as above. `stm-blk-*` joins `stm-u-visually-hidden`
 * and `stm-scrollbar` as a deliberately PUBLIC, unscoped class — safe
 * to write into content, safe for a mail template to style, and
 * stable across React and Blazor.
 *
 * ── THE THREE RENDERINGS ──
 *
 * The same markup is rendered three ways, and only the first two use
 * this sheet:
 *   • editing/preview  — this sheet, live `--stm-*` tokens, so brand
 *     switching and dark mode work
 *   • e-mail           — the send-time transform emits tables with
 *     INLINE literal values resolved from the token manifest, because
 *     a mail client supports neither custom properties nor <style>
 *
 * Every declaration below is on a token. A literal here would be
 * invisible to the brand pipeline and would silently disagree with
 * the e-mail transform, which reads the same tokens.
 * ============================================================ */


/* ── Content surface ───────────────────────────────────────── */

.stm-richtext {
    color: var(--stm-richTextEditor-onContainer);
    font-family: var(--stm-richTextEditor-typography-font-family);
    font-size: var(--stm-richTextEditor-typography-font-size);
    font-weight: var(--stm-richTextEditor-typography-font-weight);
    line-height: var(--stm-richTextEditor-typography-line-height);
}

/* The first and last child must not push the surface open — the
 * editor's own content padding already owns that space. */
.stm-richtext > :first-child { margin-block-start: 0; }
.stm-richtext > :last-child { margin-block-end: 0; }


/* ── Headings ──────────────────────────────────────────────── */

.stm-richtext h1,
.stm-richtext h2,
.stm-richtext h3,
.stm-richtext h4 {
    color: var(--stm-richTextEditor-content-headingColor);
    margin-block-start: var(--stm-richTextEditor-content-headingSpaceBefore);
    margin-block-end: var(--stm-richTextEditor-content-headingSpaceAfter);
}

.stm-richtext h1 {
    font-family: var(--stm-richTextEditor-content-heading1Typography-font-family);
    font-size: var(--stm-richTextEditor-content-heading1Typography-font-size);
    font-weight: var(--stm-richTextEditor-content-heading1Typography-font-weight);
    line-height: var(--stm-richTextEditor-content-heading1Typography-line-height);
}

.stm-richtext h2 {
    font-family: var(--stm-richTextEditor-content-heading2Typography-font-family);
    font-size: var(--stm-richTextEditor-content-heading2Typography-font-size);
    font-weight: var(--stm-richTextEditor-content-heading2Typography-font-weight);
    line-height: var(--stm-richTextEditor-content-heading2Typography-line-height);
}

.stm-richtext h3 {
    font-family: var(--stm-richTextEditor-content-heading3Typography-font-family);
    font-size: var(--stm-richTextEditor-content-heading3Typography-font-size);
    font-weight: var(--stm-richTextEditor-content-heading3Typography-font-weight);
    line-height: var(--stm-richTextEditor-content-heading3Typography-line-height);
}

.stm-richtext h4 {
    font-family: var(--stm-richTextEditor-content-heading4Typography-font-family);
    font-size: var(--stm-richTextEditor-content-heading4Typography-font-size);
    font-weight: var(--stm-richTextEditor-content-heading4Typography-font-weight);
    line-height: var(--stm-richTextEditor-content-heading4Typography-line-height);
}


/* ── Prose ─────────────────────────────────────────────────── */

.stm-richtext p {
    margin-block: 0 var(--stm-richTextEditor-content-paragraphSpace);
}

.stm-richtext a {
    color: var(--stm-richTextEditor-content-linkColor);
}

.stm-richtext a:hover {
    color: var(--stm-richTextEditor-content-linkColorHover);
}


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

.stm-richtext ul,
.stm-richtext ol {
    margin-block: 0 var(--stm-richTextEditor-content-paragraphSpace);
    padding-inline-start: var(--stm-richTextEditor-content-listPaddingInline);
}

.stm-richtext li + li {
    margin-block-start: var(--stm-richTextEditor-content-listItemSpace);
}

.stm-richtext li::marker {
    color: var(--stm-richTextEditor-content-listMarkerColor);
}


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

.stm-richtext blockquote {
    margin-block: 0 var(--stm-richTextEditor-content-paragraphSpace);
    margin-inline: 0;
    padding-inline-start: var(--stm-richTextEditor-content-blockquotePaddingInline);
    border-inline-start: var(--stm-richTextEditor-content-blockquoteBorderWidth) solid
        var(--stm-richTextEditor-content-blockquoteBorder);
    color: var(--stm-richTextEditor-content-blockquoteColor);
}


/* ── Code ──────────────────────────────────────────────────── */

.stm-richtext code,
.stm-richtext pre {
    background-color: var(--stm-richTextEditor-content-codeContainer);
    color: var(--stm-richTextEditor-content-codeOnContainer);
    border-radius: var(--stm-richTextEditor-content-codeRadius);
    padding: var(--stm-richTextEditor-content-codePaddingY) var(--stm-richTextEditor-content-codePaddingX);
    font-family: var(--stm-richTextEditor-content-codeTypography-font-family);
    font-size: var(--stm-richTextEditor-content-codeTypography-font-size);
    font-weight: var(--stm-richTextEditor-content-codeTypography-font-weight);
    line-height: var(--stm-richTextEditor-content-codeTypography-line-height);
}


/* ── Tables ────────────────────────────────────────────────── */
/* The four production member-contract documents ARE tables — this is
 * the path that actually renders, not a completeness exercise. */

.stm-richtext table {
    border-collapse: collapse;
    margin-block: 0 var(--stm-richTextEditor-content-paragraphSpace);
}

.stm-richtext th,
.stm-richtext td {
    border: var(--stm-richTextEditor-content-tableBorderWidth) solid
        var(--stm-richTextEditor-content-tableBorder);
    padding: var(--stm-richTextEditor-content-tableCellPaddingY)
        var(--stm-richTextEditor-content-tableCellPaddingX);
    text-align: start;
}

.stm-richtext th {
    background-color: var(--stm-richTextEditor-content-tableHeaderContainer);
    color: var(--stm-richTextEditor-content-tableHeaderOnContainer);
}


/* ── Rule + image ──────────────────────────────────────────── */

.stm-richtext hr {
    border: 0;
    border-block-start: var(--stm-richTextEditor-content-ruleThickness) solid
        var(--stm-richTextEditor-content-ruleColor);
    margin-block: var(--stm-richTextEditor-content-ruleSpace);
}

.stm-richtext img {
    max-width: 100%;
    border-radius: var(--stm-richTextEditor-content-imageRadius);
}


/* ============================================================
 * INSERTABLE BLOCKS — public `stm-blk-*` vocabulary
 * ============================================================
 * These are styled OUTSIDE `.stm-richtext` as well, deliberately:
 * a consuming app renders stored content in its own page, and a mail
 * template styles the same class names. Scoping them under the editor
 * would mean a block looked right while editing and wrong everywhere
 * it is actually read.
 * ============================================================ */

.stm-blk-callout {
    display: block;
    margin-block: var(--stm-richTextEditor-block-space);
    padding: var(--stm-richTextEditor-block-calloutPaddingY) var(--stm-richTextEditor-block-calloutPaddingX);
    padding-inline-start: var(--stm-richTextEditor-block-calloutGap);
    border-radius: var(--stm-richTextEditor-block-calloutRadius);
    border-inline-start: var(--stm-richTextEditor-block-calloutAccentWidth) solid transparent;
}

/* Severity is a modifier class rather than an attribute: an attribute
 * selector would not survive the sanitiser, which keeps `class` and
 * drops everything it does not name. */

.stm-blk-callout--info {
    background-color: var(--stm-richTextEditor-blockCalloutInfo-container);
    border-inline-start-color: var(--stm-richTextEditor-blockCalloutInfo-border);
    color: var(--stm-richTextEditor-blockCalloutInfo-onContainer);
}

.stm-blk-callout--success {
    background-color: var(--stm-richTextEditor-blockCalloutSuccess-container);
    border-inline-start-color: var(--stm-richTextEditor-blockCalloutSuccess-border);
    color: var(--stm-richTextEditor-blockCalloutSuccess-onContainer);
}

.stm-blk-callout--warning {
    background-color: var(--stm-richTextEditor-blockCalloutWarning-container);
    border-inline-start-color: var(--stm-richTextEditor-blockCalloutWarning-border);
    color: var(--stm-richTextEditor-blockCalloutWarning-onContainer);
}

.stm-blk-callout--error {
    background-color: var(--stm-richTextEditor-blockCalloutError-container);
    border-inline-start-color: var(--stm-richTextEditor-blockCalloutError-border);
    color: var(--stm-richTextEditor-blockCalloutError-onContainer);
}

/* A LINK styled as a button, never a <button>: the sanitiser drops
 * <button> with its content, and a mail client cannot submit one. */
.stm-blk-cta {
    display: inline-block;
    margin-block: var(--stm-richTextEditor-block-space);
    padding: var(--stm-richTextEditor-block-buttonPaddingY) var(--stm-richTextEditor-block-buttonPaddingX);
    border-radius: var(--stm-richTextEditor-block-buttonRadius);
    background-color: var(--stm-richTextEditor-block-buttonContainer);
    font-family: var(--stm-richTextEditor-block-buttonTypography-font-family);
    font-size: var(--stm-richTextEditor-block-buttonTypography-font-size);
    font-weight: var(--stm-richTextEditor-block-buttonTypography-font-weight);
    line-height: var(--stm-richTextEditor-block-buttonTypography-line-height);
    /* The action rung declares letter-spacing; #311 requires every axis of a
     * composite to be bound, or the role promises a tracking the CTA ignores. */
    letter-spacing: var(--stm-richTextEditor-block-buttonTypography-letter-spacing);
    text-decoration: none;
}

/* Both selectors are needed. Inside `.stm-richtext` the content link
 * rule above would otherwise win on specificity and paint the CTA
 * label link-blue on the primary fill. */
.stm-blk-cta,
.stm-richtext a.stm-blk-cta {
    color: var(--stm-richTextEditor-block-buttonOnContainer);
}