/* ---------------------------------------------------------------------------
   Shared styling for the two long-form legal pages.

   Replaces privacy.css and tos.css, which were near-identical copies of each
   other and predated the red repaint: neither pulled in brand.css, so both were
   still rendering the old blue palette on a white page while every other
   surface had moved to the map's paper.

   These are documents, not marketing. The job is a comfortable measure, an
   obvious hierarchy, and a table of contents you can navigate from.
--------------------------------------------------------------------------- */

body {
    background:
        radial-gradient(120% 70% at 84% -12%, oklch(88% 0.055 52 / 0.26), transparent 60%),
        linear-gradient(180deg, var(--color-canvas) 0%, oklch(97.2% 0.012 82) 100%);
    background-attachment: fixed;
    color: var(--color-ink);
}

.legal-content { padding: clamp(20px, 4vw, 48px) 0 clamp(48px, 7vw, 96px); }

.legal-container {
    width: min(1120px, 100% - 40px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

/* Sits in the document column, not across both. Spanning the full grid put the
   title 274px to the left of the first line of the thing it introduces, which
   read as two unrelated blocks rather than one document with a margin. */
.legal-header { grid-column: 2; margin-bottom: clamp(4px, 2vw, 18px); }

.legal-container h1 {
    font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin-bottom: 10px;
}

.last-updated {
    color: var(--color-ink-faint);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.legal-intro {
    max-width: 68ch;
    margin-top: 18px;
    font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.14rem);
    line-height: 1.6;
    color: var(--color-ink-muted);
}

/* ---- table of contents --------------------------------------------------
   styles.css styles the bare `nav` element for the site header: flex, spaced
   apart, padded, and centre-aligned under 768px. This is also a <nav>, so it
   inherited all of that and the mobile contents list came out as one centred
   column. Everything it sets has to be undone explicitly. */
.legal-nav {
    display: block;
    position: sticky;
    top: 24px;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: var(--fs-sm);
}
.legal-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.legal-nav a {
    display: block;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-ink-muted);
    text-decoration: none;
    line-height: 1.35;
    transition: color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.legal-nav a:hover { color: var(--color-ink); background: var(--color-surface-muted); }
.legal-nav a[aria-current="true"] {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    font-weight: 700;
}

/* ---- the document itself ------------------------------------------------ */
.legal-body { max-width: 72ch; }

.legal-body section { padding-top: clamp(26px, 3.5vw, 44px); }
.legal-body section + section { border-top: 1px solid var(--color-border); margin-top: clamp(24px, 3vw, 38px); }

.legal-body h2 {
    font-size: clamp(1.3rem, 1.14rem + 0.6vw, 1.6rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 14px;
}
.legal-body h3 {
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    margin: 22px 0 8px;
}
.legal-body p,
.legal-body li {
    font-size: var(--fs-md);
    line-height: 1.68;
    color: var(--color-ink-muted);
}
.legal-body p { margin-bottom: 14px; }
.legal-body p:last-child, .legal-body ul:last-child { margin-bottom: 0; }
.legal-body strong { color: var(--color-ink); font-weight: 650; }
.legal-body a { color: var(--color-accent); }

.legal-body ul { margin: 0 0 16px; padding-left: 0; list-style: none; display: grid; gap: 9px; }
.legal-body li { position: relative; padding-left: 20px; }
.legal-body li::before {
    content: "";
    position: absolute;
    left: 2px; top: 11px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-accent-bright);
}

/* A definition-style row for the subprocessor and retention tables, which read
   far better as pairs than as prose or as a real <table> on a phone. */
.legal-pairs { display: grid; gap: 0; margin-bottom: 16px; }
.legal-pairs > div {
    display: grid;
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    gap: 6px 20px;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
}
.legal-pairs > div:first-child { border-top: 1px solid var(--color-border); }
.legal-pairs dt, .legal-pairs > div > :first-child {
    color: var(--color-ink);
    font-weight: 650;
    font-size: var(--fs-sm);
}
.legal-pairs dd, .legal-pairs > div > :last-child {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

@media (max-width: 860px) {
    .legal-container { grid-template-columns: 1fr; gap: 20px; }
    .legal-header { grid-column: 1; }
    .legal-nav {
        position: static;
        display: block;
        padding: 10px;
        text-align: left;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
    }
    /* Two columns so fourteen sections do not cost a whole screen before the
       document starts. */
    .legal-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 6px; }
    .legal-nav a { padding: 5px 8px; }
    .legal-pairs > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .legal-nav a { transition: none; }
}