/* ============================================================================
   The public legal documents (/terms, /privacy).

   A reading surface, not a product surface: one column, capped measure, generous
   line height. The body markup comes from Markdig via .markdown-body, so this file
   only sets the page frame plus the few document-scale rules 18-markdown.css does
   not cover (it was written for short task descriptions, not a 4000-word text).

   Everything is token-driven, so the dark theme needs no block of its own.
   ============================================================================ */

.legal-page {
    /* Standing rule: no full-bleed cards on a wide monitor. The measure is capped
       for legibility anyway - long legal prose at 1400px is unreadable. */
    /* The width:100% + min-width:0 pair is load-bearing, not belt and braces. .chronos-shell
       is a flex COLUMN, so this page is a flex item and its width is a cross size; with only
       `margin: 0 auto` and no definite width, the auto margins turn off stretching and the box
       falls back to fit-content, which resolves to the min-content width of the widest child.
       The sub-processor table's min-content width is ~700px, so at a 375px viewport the whole
       page was 701px wide and scrolled sideways - the table's own overflow-x never got a
       chance, because the box it was supposed to scroll inside had already been widened to fit
       it. A definite width pins the item to the viewport and hands the overflow back to the
       table; min-width:0 keeps the automatic minimum size out of the way. Verified at 375px. */
    width: 100%;
    min-width: 0;
    max-width: 780px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

.legal-card {
    padding: 28px 32px 40px;
}

/* ----- header strip: home, the two documents, the language pair ----------- */

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--chronos-outline);
}

.legal-nav a {
    color: var(--chronos-fg-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.legal-nav a:hover {
    color: var(--chronos-violet);
}

.legal-nav a.active {
    color: var(--chronos-fg-primary);
    font-weight: 700;
}

.legal-nav-home {
    margin-inline-end: auto;
}

.legal-nav-docs {
    display: inline-flex;
    gap: 16px;
}

.legal-langs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 12px 0 0;
    font-size: 0.82rem;
}

.legal-langs a {
    color: var(--chronos-violet);
    text-decoration: none;
}

.legal-langs a.active {
    color: var(--chronos-fg-primary);
    font-weight: 700;
    text-decoration: none;
    cursor: default;
}

/* ----- the document itself ------------------------------------------------ */

.legal-body {
    margin-top: 24px;
    line-height: 1.7;
    color: var(--chronos-fg-secondary);
}

.legal-body h1 {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 8px;
    color: var(--chronos-fg-primary);
}

.legal-body h2 {
    font-size: 1.15rem;
    margin: 32px 0 8px;
    padding-top: 8px;
    color: var(--chronos-fg-primary);
    border-top: 1px solid var(--chronos-outline);
}

.legal-body h3 {
    font-size: 1rem;
    margin: 20px 0 6px;
    color: var(--chronos-fg-primary);
}

/* A heading reached through a #fragment must not hide under anything, and the
   reader should land a little above it rather than flush at the viewport edge.
   scroll-margin is what Play's deep link into #account-deletion depends on. */
.legal-body :is(h1, h2, h3) {
    scroll-margin-top: 24px;
}

.legal-body p,
.legal-body li {
    font-size: 0.94rem;
}

.legal-body ul,
.legal-body ol {
    padding-inline-start: 22px;
}

.legal-body li + li {
    margin-top: 4px;
}

.legal-body a {
    color: var(--chronos-violet);
}

.legal-body strong {
    color: var(--chronos-fg-primary);
}

/* The sub-processor and retention tables. Wide content scrolls inside its own
   box - the page body must never scroll sideways, least of all at 375px. */
.legal-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.legal-body table th,
.legal-body table td {
    border: 1px solid var(--chronos-outline);
    padding: 6px 10px;
    text-align: start;
    vertical-align: top;
}

.legal-body table th {
    background: var(--chronos-chip-bg);
    color: var(--chronos-fg-primary);
    white-space: nowrap;
}

/* ----- phone -------------------------------------------------------------- */

@media (max-width: 720px) {
    .legal-page {
        padding: 12px 10px 48px;
    }

    .legal-card {
        padding: 18px 16px 28px;
    }

    .legal-body h1 {
        font-size: 1.35rem;
    }

    .legal-nav-home {
        margin-inline-end: 0;
        width: 100%;
    }
}