@layer components {
    /*
     * A page that is only text: the terms, the cookie notice, the privacy notice.
     *
     * These are the pages a stranger reads before deciding whether to hand this app a
     * manuscript, and the one Google reads while verifying the OAuth consent screen. So they
     * are set like a chapter rather than like a form — narrow measure, a display serif for the
     * headings, generous leading — and they inherit the paper palette from `body.public`.
     *
     * The body is Markdown converted in PHP, so there are no classes to hang anything on:
     * every rule below is by element, inside the one block. This is the one place in this app
     * where that is the right thing to do.
     */
    .static-page {
        max-inline-size: var(--measure);
        margin-inline: auto;
        padding: clamp(var(--space-l), 7vw, var(--space-2xl)) var(--space-m) var(--space-xl);
    }

    .static-page__header {
        margin-block-end: var(--space-xl);
    }

    .static-page__heading {
        margin: 0;
        font-size: var(--text-title);
    }

    .static-page__meta {
        margin: var(--space-s) 0 0;
        color: var(--color-text-muted);
        font-size: var(--text-s);
        /* Small caps on a date line: it reads as a colophon rather than as content, which is
           exactly what it is. */
        text-transform: uppercase;
        letter-spacing: 0.08em;

        & time {
            font-variant-numeric: tabular-nums;
        }
    }

    .static-page__body {
        /*
         * A legal page is read by looking for one section, not from the top. The numbered
         * counter and the hairline above each heading are what make it scannable: the eye
         * finds "4." without reading "4." as prose.
         */
        counter-reset: section;

        & h2 {
            position: relative;
            counter-increment: section;
            margin-block: var(--space-xl) var(--space-m);
            padding-block-start: var(--space-l);
            border-block-start: 1px solid var(--color-border);
            font-size: var(--text-section);
        }

        & h2::before {
            content: counter(section);
            display: block;
            margin-block-end: var(--space-2xs);
            color: var(--color-accent);
            font-family: var(--font-body);
            font-size: var(--text-s);
            font-variant-numeric: tabular-nums;
            font-weight: 600;
            letter-spacing: 0.1em;
        }

        & h2:first-child {
            margin-block-start: 0;
            padding-block-start: 0;
            border-block-start: 0;
        }

        & h3 {
            margin-block: var(--space-l) var(--space-xs);
            font-size: var(--text-m);
            font-weight: 700;
        }

        & p,
        & ul,
        & ol {
            margin-block: var(--space-m);
        }

        /*
         * The opening paragraph, set bigger. Every one of these pages starts by answering the
         * question in one sentence — "we use cookies only to sign you in" — and that sentence
         * doing the work means the rest is reference rather than something to get through.
         */
        & > p:first-child {
            margin-block-start: 0;
            font-size: var(--text-lead);
            line-height: 1.5;
        }

        & ul,
        & ol {
            display: grid;
            gap: var(--space-xs);
            padding-inline-start: var(--space-l);
        }

        & li::marker {
            color: var(--color-text-muted);
        }

        /*
         * Links underlined with the accent and offset off the baseline: in this palette the
         * accent is an ink blue, and colour alone would leave a link looking like a slightly
         * darker word.
         */
        & a {
            color: var(--color-text);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-decoration-color: var(--color-accent);
            text-underline-offset: 0.22em;
            transition: background-color 0.15s ease;
        }

        & a:hover {
            background-color: var(--mark-wash);
        }

        /* An env var, a cookie name, a scope — mono, like every other literal in the app. */
        & code {
            padding: 0.1em 0.35em;
            border-radius: 0.3rem;
            background-color: var(--paper-sunken);
            font-family: var(--font-mono);
            font-size: 0.875em;
        }

        /*
         * The cookie table. It scrolls rather than squeezing: on a phone the alternative is a
         * "Platnosť" column broken into one word per line, which is where a reader stops
         * reading. The negative margin lets it use the full width of the screen while the
         * prose around it keeps its measure.
         */
        & table {
            display: block;
            overflow-x: auto;
            /* Wider than a phone on purpose, so the columns keep their shape and the table
               scrolls instead. Squeezed to 320px the "Platnosť" column becomes one word per
               line, which is where a reader stops reading. */
            min-inline-size: 30rem;
            border-collapse: collapse;
            margin-block: var(--space-l);
            margin-inline: calc(var(--space-m) * -1);
            padding-inline: var(--space-m);
            font-family: var(--font-body);
            font-size: var(--text-s);
            line-height: 1.5;
            /* The fade at the right edge is the only thing that says "there is more of this
               sideways" on a touch screen with no scrollbar. */
            mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
        }

        & table:hover,
        & table:focus-within {
            mask-image: none;
        }

        & th,
        & td {
            padding: var(--space-s) var(--space-m) var(--space-s) 0;
            border-block-end: 1px solid var(--color-border);
            text-align: start;
            vertical-align: top;
        }

        & th {
            border-block-end-color: var(--color-text);
            color: var(--color-text-muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            white-space: nowrap;
        }

        & td:first-child {
            font-family: var(--font-mono);
            font-size: 0.9em;
        }

        /*
         * One sentence per page that is the sentence. Set as a pull quote with the accent rule,
         * because on the privacy page it is the line somebody has to not skim: that the text of
         * the book is sent to whoever provides the voice.
         */
        & blockquote {
            margin: var(--space-l) 0;
            padding: var(--space-m) var(--space-l);
            border-inline-start: 3px solid var(--color-accent);
            background-color: var(--paper-sunken);
            border-start-end-radius: var(--radius-m);
            border-end-end-radius: var(--radius-m);
            font-family: var(--font-display);
            font-size: var(--text-lead);
            font-variation-settings: 'opsz' 20;
            line-height: 1.45;
        }

        & blockquote p {
            margin: 0;
        }

        & strong {
            font-weight: 650;
        }
    }

    .static-page__nav {
        margin-block-start: var(--space-xl);

        & a {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            min-block-size: 2.75rem;
            padding-inline: var(--space-m);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-full);
            color: var(--color-text);
            text-decoration: none;
            font-size: var(--text-s);
        }

        & a::before {
            content: '←';
            color: var(--color-text-muted);
        }

        & a:hover {
            border-color: var(--color-accent);
        }
    }
}