// FluxProse styles its own HTML content only. Every rule is anchored to a direct
// child of .prose (or a descendant of one of its own blocks), so a foreign
// component dropped into an article is never matched and keeps its own styling,
// while still flowing in the vertical rhythm.
$text: ':where(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, table)';

// Break-out grid: content sits at a readable measure, while elements marked
// with data-prose-wide or data-prose-full break out to wider tracks. Named
// proseContainer rather than container: Layout.module.scss already owns that
// name, and the two must not collide in a flat class namespace.
.proseContainer {
    --_gutter: var(--flux-prose-gutter, 24px);
    --_measure: var(--flux-prose-container, 90ch);
    --_wide: var(--flux-prose-wide, 12ch);

    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--_gutter), 1fr)
        [wide-start] minmax(0, var(--_wide))
        [content-start] min(var(--_measure), 100% - var(--_gutter) * 2) [content-end]
        minmax(0, var(--_wide)) [wide-end]
        minmax(var(--_gutter), 1fr) [full-end];

    > * {
        grid-column: content;
    }

    > [data-prose-wide] {
        grid-column: wide;
    }

    > [data-prose-full] {
        grid-column: full;
    }

    // A break-out element reads as a section break, so it and the element that
    // follows it get more room than the regular inter-block rhythm.
    > :is([data-prose-wide], [data-prose-full]):not(:first-child),
    > :is([data-prose-wide], [data-prose-full]) + * {
        margin-top: 33px;
    }
}

.prose {
    font-size: var(--font-size-default);
    line-height: var(--line-height-default);
    color: var(--foreground);

    // Vertical rhythm. Every direct child, including an embedded component, is
    // spaced from its predecessor; a new heading gets more room.
    > * + * {
        margin-top: 18px;
    }

    > * + :where(h1, h2, h3) {
        margin-top: 42px;
    }

    // Headings.
    > h2 {
        padding-bottom: 9px;
        border-bottom: 1px solid var(--surface-stroke);
    }

    // Lists.
    > :where(ul, ol),
    > :where(ul, ol) :where(ul, ol) {
        padding-left: 24px;
    }

    > ul {
        list-style: disc;
    }

    > ol {
        list-style: decimal;
    }

    > :where(ul, ol) ul {
        list-style: circle;
    }

    > :where(ul, ol) ol {
        list-style: lower-alpha;
    }

    > :where(ul, ol) li + li,
    > :where(ul, ol) li > :where(ul, ol) {
        margin-top: 6px;
    }

    // Blockquote.
    > blockquote {
        font-style: italic;
        padding-left: 18px;
        color: var(--gray-600);
        border-left: 3px solid var(--surface-stroke);
    }

    // Inline code and sample output inside prose text.
    > #{$text} :where(code, samp) {
        font-size: var(--font-size-xsmall);
        padding: 3px 6px;
        border-radius: var(--radius-half);
        background: var(--gray-100);
    }

    // Keyboard key inside prose text.
    > #{$text} kbd {
        font-size: var(--font-size-2xsmall);
        padding: 3px 6px;
        border: 1px solid var(--surface-stroke);
        border-radius: var(--radius-half);
        box-shadow: 0 1px 0 var(--surface-stroke);
    }

    // Badges and tags sit inline in prose text; center them on the line.
    > #{$text} :local(.badge) {
        vertical-align: middle;
    }

    // Code block.
    > pre {
        overflow-x: auto;
        padding: 15px 18px;
        border-radius: var(--radius);
        background: var(--gray-100);
    }

    > pre code {
        font-size: inherit;
        padding: 0;
        background: none;
    }

    // Divider.
    > * + hr,
    > hr + * {
        margin-top: 33px;
    }

    > hr {
        border: 0;
        border-top: 1px solid var(--surface-stroke);
    }

    // Table, matching the FluxTable component.
    > table {
        width: 100%;
        border-collapse: collapse;
        text-align: start;
    }

    > table :where(th, td) {
        padding: 12px 15px;
        vertical-align: top;
        text-align: start;
        overflow-wrap: break-word;
    }

    > table :where(th, td) + :where(th, td) {
        border-left: 1px solid var(--gray-100);
    }

    > table tr + tr > :where(th, td) {
        border-top: 1px solid var(--gray-100);
    }

    > table thead th {
        font-size: var(--font-size-small);
        font-weight: 700;
        color: var(--foreground-prominent);
        border-bottom: 2px solid var(--gray-100);
        background: var(--gray-50);
    }

    // Image.
    > img {
        height: unset;
        border-radius: var(--radius-half);
        outline: 1px solid rgb(0 0 0 / .025);
        outline-offset: -1px;
    }
}