/* PROSE — long-form documents rendered from Markdown (privacy policy, terms).
   The Markdown supplies no classes of its own, so the renderer hands the
   generated nodes the design system's classes (tt-heading, tt-paragraph,
   tt-link, tt-table) and this file only does what class-per-node cannot:
   size the headings by level, set the measure, and space the sections. */

.tt-prose {
    /* One measure for the whole document, so paragraphs, lists and tables all
       end on the same line. In ch so it tracks the fluid type scale — but note
       that PP Neue Montreal's zero is wide, so a line of running text fits about
       1.4 characters per ch: 52ch lands on the ~72 characters we actually want.
       Step -1 rather than the landing page's step 0: this is a document to read
       through, not a page to scan. */
    --tt-prose-measure: 52ch;

    max-width: var(--tt-prose-measure);
    margin-inline: auto;
    color: var(--paragraph-color);
    font-size: var(--step--1);
    line-height: 1.6;
}

/* HEADINGS — the level, not a utility class, decides the size here, because the
   Markdown decides the level. Steps mirror the landing pages: h1 at step 4,
   section headings at step 2. */
.tt-prose h1 {
    font-size: var(--step-4);
    margin-block-end: var(--space-m);
}

.tt-prose h2 {
    font-size: var(--step-2);
    margin-block: var(--space-xl) var(--space-xs);
}

.tt-prose h3 {
    font-size: var(--step-0);
    margin-block: var(--space-m) var(--space-2xs);
}

/* COPY — .tt-paragraph caps itself at 60ch for landing-page columns; inside the
   document the measure is set once on .tt-prose so paragraphs, lists and tables
   all end on the same line. */
.tt-prose .tt-paragraph {
    max-width: none;
    margin-block: 0 var(--space-s);
    line-height: inherit;
}

/* LISTS — the reset strips ul markers, which suits navigation and card lists but
   not a document where the bullets carry the enumeration. */
.tt-prose ul {
    list-style: disc;
}

.tt-prose ol {
    list-style: decimal;
}

.tt-prose :is(ul, ol) {
    margin-block: 0 var(--space-s);
    padding-inline-start: var(--space-m);
}

.tt-prose li {
    margin-block-end: var(--space-3xs);
}

.tt-prose li::marker {
    color: var(--text-muted);
}

.tt-prose strong {
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
}

/* TABLES — a table of prose needs more room than a column of prose, so once
   there is space either side of the measure the tables lean out into it. The
   bleed is gated to wide viewports because below that the article already fills
   the container and there is nothing to lean into. */
.tt-prose table {
    margin-block: var(--space-xs) var(--space-l);
}

.tt-prose td {
    vertical-align: top;
}

/* Below the measure the table has nowhere to lean, so it scrolls on its own
   rather than pushing the page sideways. */
@media (max-width: 40rem) {
    .tt-prose table {
        display: block;
        overflow-x: auto;
    }
}

@media (min-width: 64rem) {
    .tt-prose {
        --tt-prose-bleed: clamp(0rem, 6vw, 8rem);
    }

    .tt-prose table {
        width: calc(100% + (2 * var(--tt-prose-bleed)));
        margin-inline: calc(-1 * var(--tt-prose-bleed));
    }
}

/* THE VERSION LINE — a thematic break followed by the version and date. Quiet,
   and clearly outside the body of the document. */
.tt-prose hr {
    margin-block: var(--space-xl) var(--space-m);
    border: 0;
    border-block-start: var(--border-thin) solid var(--border-muted);
}

.tt-prose hr + .tt-paragraph {
    font-size: var(--step--2);
    color: var(--text-muted);
}

/* SECTION ANCHOR — the heading carries the id; this is the affordance that says
   the section can be linked to. Rendered aria-hidden and out of the tab order,
   because "#" read aloud before every heading is noise and the heading id alone
   is what makes a section linkable; this is purely a pointer affordance. */
.tt-prose-anchor {
    margin-inline-start: var(--space-2xs);
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.tt-prose :is(h1, h2, h3):hover .tt-prose-anchor {
    opacity: 1;
}

.tt-prose-anchor:hover {
    color: var(--primary-color);
}

@media (prefers-reduced-motion: reduce) {
    .tt-prose-anchor {
        transition: none;
    }
}