/* 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. */

:root {
    /* 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.

       Declared here rather than on .tt-prose so that blocks which sit with a
       document without being part of it can line up with it — see
       .tt-prose-column below. Two elements each holding their own copy of the
       number is how a column drifts out of alignment. */
    --tt-prose-measure: 52ch;
}

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

/* COLUMN — a block that belongs with the document without being part of it: the
   notice above a legal document, the form that accepts it. It takes the measure
   and the centre line, and none of the prose type styles, which would resize a
   form's labels and recolour its links.

   The font size is part of the measure, not a separate decision: ch is the width
   of the element's own '0', so 52ch is only the same width on two elements that
   are set at the same size. .tt-alert already sets step -1 and lines up by
   coincidence; a form inherits the page's larger size and comes out narrower.
   Setting it here makes the alignment deliberate rather than lucky. */
.tt-prose-column {
    max-width: var(--tt-prose-measure);
    margin-inline: auto;
    font-size: var(--step--1);
}

/* 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));
    }
}

/* THEMATIC BREAKS — the Markdown uses these to separate the annexes of the DPA
   from its body, and the template uses one to close the document above the
   version line. */
.tt-prose hr {
    margin-block: var(--space-xl) var(--space-m);
    border: 0;
    border-block-start: var(--border-thin) solid var(--border-muted);
}

/* THE VERSION LINE — rendered by the template from the document's front matter,
   not written in the Markdown. Quiet, and clearly outside the body. */
.tt-prose-version {
    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;
    }
}