/* Stylesheet for the legal pages (/privacy, /terms, /data-deletion).
   Loads after tokens.css and site.css, which own the palette, reset, body,
   links, headings' feature settings, header, footer and the shared
   .eyebrow / .nav-link idioms. Only the document prose and its few
   components live here. */

@layer tokens, reset, base, prose, components, utilities;

/* ---------- Prose ---------- */

@layer prose {
    .doc {
        max-inline-size: var(--measure);
        margin-inline: auto;
        padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 6rem);
        padding-inline: var(--gutter);

        h1,
        h2,
        h3 {
            color: var(--text-primary);
            font-weight: 600;
            text-wrap: balance;
        }

        h1 {
            font-size: var(--step-3);
            letter-spacing: var(--tracking-tight);
            line-height: var(--leading-tight);
            margin-block-end: var(--space-3);
        }

        h2 {
            font-size: var(--step-1);
            letter-spacing: var(--tracking-heading);
            margin-block: var(--space-12) var(--space-3);
            padding-block-start: var(--space-6);
            border-block-start: 1px solid var(--border);
        }

        h3 {
            font-size: var(--step-0);
            margin-block: var(--space-8) var(--space-2);
        }

        p,
        li {
            color: var(--text-secondary);
            text-wrap: pretty;
        }

        p {
            margin-block-end: var(--space-4);
        }

        ul,
        ol {
            padding-inline-start: var(--space-6);
            margin-block-end: var(--space-4);
        }

        li {
            margin-block-end: var(--space-2);
        }

        strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        code {
            font-family: var(--font-mono);
            font-size: 0.9em;
            color: var(--text-primary);
            background: var(--surface);
            padding-block: var(--space-1);
            padding-inline: var(--space-2);
            border-radius: calc(var(--radius-md) / 2);
        }

        table {
            inline-size: 100%;
            border-collapse: collapse;
            margin-block-end: var(--space-6);
            font-size: var(--step--1);
        }

        th,
        td {
            text-align: start;
            vertical-align: top;
            padding-block: var(--space-3);
            padding-inline: var(--space-3);
            border-block-end: 1px solid var(--border);
            color: var(--text-secondary);
        }

        th {
            color: var(--text-primary);
            font-weight: 600;
            border-block-end-color: var(--border-strong);
        }
    }
}

/* ---------- Components ---------- */

@layer components {
    /* Links inside carry class="nav-link". */
    .legal-nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-5);
        font-size: var(--step--1);
    }

    /* The page you are on reads as settled text, not as a destination. */
    .legal-nav [aria-current="page"] {
        color: var(--text-primary);
    }

    /* Document masthead: the kicker carries class="eyebrow"; only its rhythm lives here. */
    .doc__kicker {
        margin-block-end: var(--space-3);
    }

    .doc__meta {
        color: var(--text-tertiary);
        font-size: var(--step--1);
        margin-block-end: var(--space-10);
    }

    .table-wrap {
        overflow-x: auto;
    }

    .callout {
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-inline-start: 3px solid var(--primary);
        border-radius: var(--radius-md);
        padding-block: var(--space-4);
        padding-inline: var(--space-5);
        margin-block-end: var(--space-6);

        p:last-child {
            margin-block-end: 0;
        }
    }
}

/* ---------- Print (colours come from the token remap in tokens.css) ---------- */

@media print {
    .legal-nav {
        display: none;
    }

    .doc {
        max-inline-size: none;

        code {
            background: none;
        }
    }

    .callout {
        background: none;
        border-inline-start-color: currentColor;
    }
}