/* ============================================================================
   legal.css — the four documents: terms, privacy, cookies, returns.

   Long text that people skim rather than read, so: a sticky contents list on
   wide screens, numbered sections with their own anchors, and tables that
   scroll rather than squash. Everything else comes from .prose in base.css.
   ========================================================================= */

.legal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ── Layout: contents beside the text once there is room for it ── */

.legal__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1000px) {
    .legal__grid { grid-template-columns: 15rem minmax(0, 1fr); }
    .legal__toc {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
        max-height: calc(100vh - var(--header-h) - 3rem);
        overflow-y: auto;
    }
}

.legal__toc-title {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--sp-3);
}

.legal__toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
    display: grid;
    gap: .5rem;
}

.legal__toc li { counter-increment: toc; }

.legal__toc a {
    display: flex;
    gap: .6em;
    font-size: var(--step--1);
    color: var(--ink-soft);
    text-decoration: none;
    line-height: 1.35;
}

.legal__toc a::before {
    content: counter(toc);
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink-faint);
    padding-top: .15em;
}

.legal__toc a:hover { color: var(--accent); }

/* ── The document body ── */

.legal__body { counter-reset: section; }

.legal__section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.legal__section + .legal__section {
    margin-top: clamp(2.25rem, 5vw, 3.25rem);
    padding-top: clamp(2.25rem, 5vw, 3.25rem);
    border-top: 1px solid var(--line);
}

.legal__section > h2 {
    counter-increment: section;
    font-size: var(--step-2);
    letter-spacing: -.01em;
    margin-bottom: var(--sp-4);
}

.legal__section > h2::before {
    content: counter(section) ". ";
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: .7em;
    letter-spacing: .04em;
}

.legal__section h3 {
    font-size: var(--step-0);
    margin-top: 1.9em;
    margin-bottom: .35em;
}

/* Facts worth pulling out of a paragraph: deadlines, addresses, key numbers. */
.legal__callout {
    margin-top: var(--sp-4);
    padding: var(--sp-4) var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}

.legal__callout p { margin: 0; }
.legal__callout p + p { margin-top: .7em; }

.legal__address {
    margin: 0;
    font-style: normal;
    line-height: 1.7;
    color: var(--ink);
}

/* Cookie and data tables. */
.legal .table-wrap { margin-top: var(--sp-4); }

.legal .table td:first-child,
.legal .table th:first-child { white-space: nowrap; }

.legal code {
    padding: .12em .4em;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: .9em;
}