/* ==========================================================================
   TrackE5 — Legal documents (privacy, terms, security)
   Requires assets/site.css
   ========================================================================== */

.legal-hero {
    padding-block: clamp(130px, 17vh, 190px) clamp(28px, 4vw, 48px);
    background: var(--cream);
}
.legal-hero .h-display { font-size: clamp(2.4rem, 4.6vw, 3.6rem); max-width: 18ch; }
.legal-meta { margin-top: 14px; font-size: 0.92rem; color: var(--text-muted); }

.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
    padding-bottom: clamp(70px, 9vw, 120px);
}

/* Sticky contents. Legal documents are scanned for one clause far more often
   than they are read start to finish. */
.legal-toc { position: sticky; top: 120px; }
.legal-toc-head {
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.legal-toc ol { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.legal-toc a {
    font-size: 0.93rem;
    line-height: 1.4;
    color: var(--text-body);
    border-left: 2px solid var(--border);
    padding-left: 14px;
    display: block;
    transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.legal-toc a:hover { color: var(--olive); border-left-color: var(--accent); }

.legal-body { max-width: 74ch; }
.legal-body section { padding-block: clamp(26px, 3vw, 40px); border-top: 1px solid var(--border); }
.legal-body section:first-of-type { border-top: none; padding-top: 0; }
/* scroll-margin so a #hash link does not park the heading under the fixed nav */
.legal-body section { scroll-margin-top: 110px; }

.legal-body h2 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 550;
    margin-bottom: 16px;
}
.legal-body p { margin-bottom: 14px; line-height: 1.72; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body ul { margin: 0 0 14px; padding-left: 0; list-style: none; }
.legal-body li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    line-height: 1.68;
}
.legal-body li::before {
    content: '';
    position: absolute;
    left: 4px; top: 11px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--line-2);
}
.legal-body strong { color: var(--olive); font-weight: 550; }

/* Draft banner. Deliberately loud: a legal page published with placeholders
   still in it is worse than no page at all, so this must be impossible to
   overlook and must be removed manually. */
.legal-draft {
    padding: 20px 24px;
    margin-bottom: 34px;
    border-radius: var(--radius-md);
    border: 1px solid var(--neg-fill);
    background: var(--neg-soft);
    color: var(--neg);
    font-size: 0.95rem;
    line-height: 1.65;
}
.legal-draft strong { color: var(--neg); }

/* Unfilled facts. High-contrast on purpose — these should be jarring to read
   and trivial to grep for before going live. */
.todo {
    background: var(--neg-fill);
    color: #fff;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.86em;
    font-weight: 500;
    white-space: normal;
}

@media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; }
    .legal-toc { position: static; }
    .legal-toc ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
}
@media (max-width: 560px) {
    .legal-toc ol { grid-template-columns: 1fr; }
}