.tng-dark-theme .markdown-content {
    --spacing-md: 0 0.5rem 0 0.5rem;
    --background-color: var(--dark-background-1);
    --color: var(--dark-textcolor-1);
}

/* --background-color is a local ALIAS, not a colour of its own: the rules further
   down (table zebra stripes, blockquote, mermaid block) name one surface once
   instead of repeating a .tng-dark-theme override at every single use. The value
   comes from the theme - the alias only decides WHICH token is meant here. */
.markdown-content {
    --spacing-md: 0 0.5rem 0 0.5rem;
    --background-color: var(--background-1);
    --color: var(--textcolor-1);
}

    /* ---- Alert blocks (UseAlertBlocks) ----
       Markdig emits <div class="markdown-alert markdown-alert-<kind>"> with a
       <p class="markdown-alert-title"> that carries an inline SVG icon.
       Styled to match TngHintBox: tinted surface, 4px accent bar on the left,
       icon and title on one line. The accent/bg/border tokens are the very same
       ones TngHintBox uses, so both read identically.
       IMPORTANT: the container selector must exclude .markdown-alert-title,
       otherwise the title paragraph matches [class*="markdown-alert"] too and
       renders as a second, nested box inside the alert. */
    .markdown-content [class*="markdown-alert"]:not(.markdown-alert-title) {
        --md-alert-accent: var(--gray-4);
        --md-alert-bg: var(--background-1);
        --md-alert-border: var(--border-1);
        background-color: var(--md-alert-bg);
        border: 1px solid var(--md-alert-border);
        border-left: 4px solid var(--md-alert-accent);
        border-radius: 0.25rem;
        padding: 0.5rem 0.75rem;
        margin: 0.75rem 0.5rem;
    }

        /* Icon and label share one baseline instead of colliding. */
        .markdown-content .markdown-alert-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            color: var(--md-alert-accent);
            background: none;
            border: none;
            padding: 0;
            margin: 0 0 0.35rem;
        }

            .markdown-content .markdown-alert-title svg {
                fill: currentColor;
                flex: 0 0 auto;
            }

        .markdown-content [class*="markdown-alert"]:not(.markdown-alert-title) > :last-child {
            margin-bottom: 0;
        }

    /* Type tints, mirroring the TngHintBox palette.
       These MUST repeat the :not(.markdown-alert-title) part: the container rule
       above scores (0,3,0) because of the attribute selector plus :not(), so a
       plain .markdown-alert-note (0,2,0) would lose and the neutral defaults
       would win - which silently removed all alert colors. */
    .markdown-content .markdown-alert-note:not(.markdown-alert-title) {
        --md-alert-accent: var(--info);
        --md-alert-bg: var(--information-background);
        --md-alert-border: var(--information-border);
    }

    .markdown-content .markdown-alert-tip:not(.markdown-alert-title) {
        --md-alert-accent: var(--valid);
        --md-alert-bg: var(--success-background);
        --md-alert-border: var(--success-border);
    }

    .markdown-content .markdown-alert-important:not(.markdown-alert-title) {
        --md-alert-accent: var(--info);
        --md-alert-bg: var(--information-background);
        --md-alert-border: var(--information-border);
    }

    .markdown-content .markdown-alert-warning:not(.markdown-alert-title) {
        --md-alert-accent: var(--warning);
        --md-alert-bg: var(--warning2-background);
        --md-alert-border: var(--warning2-border);
    }

    .markdown-content .markdown-alert-caution:not(.markdown-alert-title) {
        --md-alert-accent: var(--error);
        --md-alert-bg: var(--failure-background);
        --md-alert-border: var(--failure-border);
    }

    /* ---- Dark theme: keep a subtle surface, colorize accent + border only.
       Same strategy as TngHintBox - the light tints would glare on dark.
       The SVG icon inherits the accent via fill: currentColor, which fixes
       the black-on-dark icons. ---- */
    .tng-dark-theme .markdown-content [class*="markdown-alert"]:not(.markdown-alert-title) {
        --md-alert-bg: var(--dark-background-1);
        --md-alert-border: var(--dark-border-1);
        --md-alert-accent: var(--dark-gray-2);
    }

    .tng-dark-theme .markdown-content .markdown-alert-note:not(.markdown-alert-title),
    .tng-dark-theme .markdown-content .markdown-alert-important:not(.markdown-alert-title) {
        --md-alert-accent: var(--dark-info);
    }

    .tng-dark-theme .markdown-content .markdown-alert-tip:not(.markdown-alert-title) {
        --md-alert-accent: var(--dark-valid);
    }

    .tng-dark-theme .markdown-content .markdown-alert-warning:not(.markdown-alert-title) {
        --md-alert-accent: var(--dark-warning);
    }

    .tng-dark-theme .markdown-content .markdown-alert-caution:not(.markdown-alert-title) {
        --md-alert-accent: var(--dark-error);
    }

    /* Accent bar on the left, mirroring the MultiLevelText hierarchy-level
       look (0.15rem bar in --textcolor-1) so quoted content reads the same
       way across the product. Alerts are excluded - they bring their own
       container styling above. */
    .markdown-content blockquote:not([class*="markdown-alert"]) {
        position: relative;
        padding: 0.5rem 0.75rem 0.5rem 1rem;
        margin: 0.75rem 0.5rem;
        background-color: var(--background-color);
        border-radius: 0.25rem;
    }

        .markdown-content blockquote:not([class*="markdown-alert"])::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0.15rem;
            background-color: var(--textcolor-1);
            border-radius: 0.25rem 0 0 0.25rem;
        }

    .tng-dark-theme .markdown-content blockquote:not([class*="markdown-alert"])::before {
        background-color: var(--dark-textcolor-1);
    }

        /* Nested quotes must not stack redundant outer spacing. */
        .markdown-content blockquote > :first-child {
            margin-top: 0;
        }

        .markdown-content blockquote > :last-child {
            margin-bottom: 0;
        }

    /* Authored content must never blow up the layout with oversized images. */
    .markdown-content img {
        max-width: 100%;
        height: auto;
    }

    /* ---- Vertical rhythm ----
       Browser defaults give headings symmetric top/bottom margins, so a heading
       sits as close to the PRECEDING paragraph as to its own text and stops
       reading as a group opener. Asymmetric spacing (much more above than
       below) ties each heading to the content it introduces. All values are in
       rem per house style; since rem does not scale with the heading's own font
       size, the staggering that em would have produced is spelled out
       explicitly per level below. */
    .markdown-content h1,
    .markdown-content h2,
    .markdown-content h3,
    .markdown-content h4,
    .markdown-content h5,
    .markdown-content h6 {
        margin-bottom: 0.5rem;
        line-height: 1.25;
    }

    /* Higher levels open larger sections and therefore need more separation. */
    .markdown-content h1 {
        margin-top: 2rem;
    }

    .markdown-content h2 {
        margin-top: 1.75rem;
    }

    .markdown-content h3 {
        margin-top: 1.5rem;
    }

    .markdown-content h4,
    .markdown-content h5,
    .markdown-content h6 {
        margin-top: 1.25rem;
    }

    /* A heading opening the document (or any container) must not push the whole
       block down with dead space. */
    .markdown-content > :first-child {
        margin-top: 0;
    }

    /* Consecutive headings (h2 directly followed by h3) would otherwise stack
       the full gap and tear the pair apart. */
    .markdown-content h1 + h2,
    .markdown-content h2 + h3,
    .markdown-content h3 + h4,
    .markdown-content h4 + h5,
    .markdown-content h5 + h6 {
        margin-top: 0.75rem;
    }

    .markdown-content p,
    .markdown-content ul,
    .markdown-content ol {
        margin-bottom: 0.75rem;
    }

    /* Fallback for any <pre> not produced by TngCodeBlockRenderer. */
    .markdown-content pre {
        margin: var(--margin-group-top-bottom) var(--margin-group-left-right);
        padding: 0.6rem 0.75rem;
        color: var(--textcolor-1);
        background-color: var(--background-2);
        border: 1px solid var(--border-1);
        border-radius: 0.375rem;
        overflow-x: auto;
        white-space: pre;
    }

        .markdown-content pre code {
            background: none;
            padding: 0;
            color: var(--textcolor-1);
            font-family: Consolas, "Cascadia Code", "Cascadia Mono", "Courier New", monospace;
            font-size: 0.82rem;
            line-height: 1.5;
        }

    .tng-dark-theme .markdown-content pre {
        color: var(--dark-textcolor-1);
        background-color: var(--dark-gray-4);
        border-color: var(--dark-border-1);
    }

        .tng-dark-theme .markdown-content pre code {
            color: var(--dark-textcolor-1);
        }

    /* Inline code only - a bare `code` selector would also recolor the text
       inside .markdown-code-pre and fight the shared CodeBlock.css rules. */
    .markdown-content code:not(pre code) {
        color: var(--bs-code-color);
        font-size: 0.9rem;
    }

    .markdown-content table {
        padding: var(--spacing-md);
        width: 100%;
        border-collapse: collapse;
        border-style: none;
        caption-side: bottom;
    }

        .markdown-content table thead,
        .markdown-content table tbody,
        .markdown-content table tfoot {
            border-color: inherit;
            border-style: dotted;
            border-width: 1px 0 1px 0;
        }

            .markdown-content table tbody tr:nth-child(even) {
                background-color: transparent;
            }

            .markdown-content table tbody tr:nth-child(odd) {
                background-color: var(--background-color);
            }

    /* ---- Diagrams (```mermaid) ----
       TngCodeBlockRenderer emits <pre class="mermaid"> with the diagram source;
       TngMarkdown.razor.js replaces the content with an SVG once mermaid is
       loaded. Both states are styled here: the source stays readable while the
       library is still on its way, and the finished diagram is centered.
       Colours are NOT set here - mermaid bakes them into the SVG, fed from the
       theme variables in TngMarkdown.razor.js. */
    .markdown-content pre.mermaid {
        margin: var(--margin-group-top-bottom) var(--margin-group-left-right);
        padding: 0.75rem;
        border: 1px solid var(--border-1);
        border-radius: 0.25rem;
        background-color: var(--background-color);
        text-align: center;
        overflow-x: auto;
        /* Undo the code look inherited from pre: while the source is still
           visible it is a diagram waiting to happen, not a listing. */
        white-space: pre-wrap;
    }

        .markdown-content pre.mermaid svg {
            max-width: 100%;
            height: auto;
        }

        /* A diagram is user content and may simply be mistyped. The source is put
           back in that case; the accent marks it as broken without hiding it.
           Mermaid's own error graphic is switched off (suppressErrorRendering),
           because it is drawn detached from the block it belongs to. */
        .markdown-content pre.mermaid[data-mermaid-error] {
            border-left: 0.25rem solid var(--error);
            text-align: left;
        }

            /* The reason is shown where the broken diagram is, not floating elsewhere. */
            .markdown-content pre.mermaid[data-mermaid-error]::before {
                content: attr(data-mermaid-error);
                display: block;
                margin-bottom: 0.5rem;
                padding-bottom: 0.25rem;
                border-bottom: 1px solid var(--error);
                color: var(--error);
                font-weight: bold;
                white-space: normal;
            }