/* Legal pages (Terms of Service, Privacy Policy).
   Minimal and readable, themed to match the Dispatch reading experience
   so legal copy reads as part of the site rather than a bare Spellbook
   page. Loaded only on /terms/ and /privacy/ via the template's
   extra_css block. Uses the global --dispatch-* tokens. */

/* Push the body off the storm.css gray onto dispatch dark so the whole
   viewport matches the site - same trick guide.css uses for its layout. */
body:has(.legal-page) {
    background: var(--dispatch-bg);
}

.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 5rem;
}

.legal-prose {
    font-family: var(--dispatch-editorial);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--dispatch-text);
    text-wrap: pretty;
}

/* ---- Masthead ---- */
.legal-prose h1 {
    font-family: var(--dispatch-editorial);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dispatch-text-strong);
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--dispatch-teal);
    text-wrap: balance;
}

/* The two lines under the title are the company name and the
   effective/last-updated dates - render them as a compact mono meta block
   instead of body prose. They are the first two paragraphs after the h1. */
.legal-prose h1 + p,
.legal-prose h1 + p + p {
    font-family: var(--dispatch-mono);
    font-size: 0.82rem;
    line-height: 1.9;
    color: var(--dispatch-text-muted);
    margin: 0;
}
.legal-prose h1 + p strong,
.legal-prose h1 + p + p strong {
    color: var(--dispatch-text);
    font-weight: 600;
}
.legal-prose h1 + p { margin-top: 0.25rem; }
.legal-prose h1 + p + p { margin-bottom: 0.5rem; }

/* ---- Headings ---- */
.legal-prose h2 {
    font-family: var(--dispatch-editorial);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--dispatch-text-strong);
    margin: 2.5rem 0 0.85rem;
    text-wrap: balance;
}
.legal-prose h3 {
    font-family: var(--dispatch-editorial);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--dispatch-text-strong);
    margin: 1.6rem 0 0.5rem;
}

/* ---- Body ---- */
.legal-prose p { margin: 0 0 1rem; }

.legal-prose a {
    color: var(--dispatch-teal);
    text-decoration: none;
    border-bottom: 1px solid rgba(93, 202, 165, 0.4);
    transition: color 0.12s, border-color 0.12s;
}
.legal-prose a:hover {
    color: var(--dispatch-teal-bright);
    border-bottom-color: var(--dispatch-teal-bright);
}

.legal-prose strong { color: var(--dispatch-text-strong); font-weight: 600; }
.legal-prose em { font-style: italic; }

.legal-prose ul,
.legal-prose ol {
    margin: 0 0 1rem 1.4rem;
    padding: 0;
}
.legal-prose li { margin: 0 0 0.5rem; }
.legal-prose li::marker { color: var(--dispatch-teal); }
/* Markdown renders these as loose lists (<li><p>...</p></li>); kill the
   inner paragraph margin so list items don't double-space. */
.legal-prose li > p { margin: 0; }

.legal-prose hr {
    border: 0;
    border-top: 1px solid var(--dispatch-border);
    margin: 2.25rem 0;
}

/* Inline code (endpoints, regions in the legal copy). */
.legal-prose code {
    font-family: var(--dispatch-mono);
    font-size: 0.85em;
    color: var(--dispatch-teal-bright);
    background: var(--dispatch-surface);
    border: 1px solid var(--dispatch-border);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

/* Tables (e.g. a data-categories list in the privacy policy). */
.legal-prose table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--dispatch-mono);
    font-size: 0.82rem;
    margin: 1.25rem 0;
    border: 1px solid var(--dispatch-border);
}
.legal-prose th,
.legal-prose td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--dispatch-border);
}
.legal-prose thead th {
    color: var(--dispatch-text-strong);
    background: var(--dispatch-surface);
}
.legal-prose tbody tr:last-child td { border-bottom: 0; }

/* Callout-style blockquote, matching the guide. */
.legal-prose blockquote {
    border-left: 3px solid var(--dispatch-gold);
    background: rgba(212, 164, 55, 0.04);
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 2px 2px 0;
    color: var(--dispatch-text);
}
.legal-prose blockquote p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .legal-page { padding: 2rem 1.1rem 3.5rem; }
    .legal-prose h1 { font-size: 1.9rem; }
}