/*
 * legal.css — styling for the standalone public legal pages (Privacy & Cookies).
 * Self-contained and theme-aware; the page does not load the app's global CSS.
 */

:root {
    --lg-bg: #f8fafc;
    --lg-surface: #ffffff;
    --lg-text: #1f2937;
    --lg-muted: #64748b;
    --lg-border: #e2e8f0;
    --lg-accent: #0f766e;
    --lg-topbar: #0f172a;
}

@media (prefers-color-scheme: dark) {
    :root {
        --lg-bg: #0f172a;
        --lg-surface: #1e293b;
        --lg-text: #e2e8f0;
        --lg-muted: #94a3b8;
        --lg-border: #334155;
        --lg-accent: #2dd4bf;
        --lg-topbar: #020617;
    }
}

* { box-sizing: border-box; }

.legal-body {
    margin: 0;
    background: var(--lg-bg);
    color: var(--lg-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

.legal-topbar {
    background: var(--lg-topbar);
    padding: 14px 24px;
}

.legal-home {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    letter-spacing: 0.2px;
}

.legal-doc {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    background: var(--lg-surface);
    border-left: 1px solid var(--lg-border);
    border-right: 1px solid var(--lg-border);
    min-height: 100vh;
}

.legal-doc h1 {
    font-size: 1.9rem;
    margin: 8px 0 4px;
}

.legal-meta {
    color: var(--lg-muted);
    font-size: 0.92rem;
    margin: 0 0 20px;
}

.legal-toc {
    background: var(--lg-bg);
    border: 1px solid var(--lg-border);
    border-radius: 10px;
    padding: 14px 14px 14px 34px;
    margin: 18px 0 28px;
}

.legal-toc a { color: var(--lg-accent); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

/* The identity-gate promise at the top of the policy. Given its own surface so a
   reader who skims the page still lands on the one commitment that matters most.
   Colours come from the same variables as the rest of the page, so it follows the
   light and dark themes without a second rule. */
.legal-promise {
    background: var(--lg-bg);
    border: 1px solid var(--lg-accent);
    border-left: 5px solid var(--lg-accent);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 0 0 32px;
}

.legal-promise h2 {
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--lg-accent);
    margin: 0 0 10px;
}

.legal-promise p {
    margin: 10px 0;
}

.legal-promise p:last-child {
    margin-bottom: 0;
}

.legal-part {
    margin-top: 40px;
    padding-top: 8px;
    border-top: 3px solid var(--lg-accent);
}

.legal-part-title {
    font-size: 1.45rem;
    color: var(--lg-accent);
    margin: 16px 0 8px;
}

.legal-doc h3 {
    font-size: 1.12rem;
    margin: 26px 0 6px;
}

.legal-doc h4 {
    font-size: 1rem;
    margin: 18px 0 4px;
}

.legal-doc p { margin: 8px 0; }

.legal-doc ul {
    margin: 8px 0;
    padding-left: 22px;
}

.legal-doc li { margin: 5px 0; }

.legal-doc code {
    background: var(--lg-bg);
    border: 1px solid var(--lg-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.9em;
}

.legal-contact {
    background: var(--lg-bg);
    border: 1px solid var(--lg-border);
    border-radius: 8px;
    padding: 14px 16px;
}

.legal-table-wrap {
    overflow-x: auto;
    margin: 12px 0;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
    border: 1px solid var(--lg-border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    background: var(--lg-bg);
    font-weight: 600;
}

.legal-back {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--lg-border);
}

.legal-back a { color: var(--lg-accent); text-decoration: none; }
.legal-back a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .legal-doc { padding: 24px 16px 48px; border-left: none; border-right: none; }
    .legal-doc h1 { font-size: 1.55rem; }
}