/* ═══════════════════════════════════════════════════════════
   Legal documents — privacy.html, terms.html, data.html.

   Long-form prose, so the priorities are different from every
   other stylesheet here: measure, vertical rhythm and the
   ability to find a clause by number. No animation, no reveal
   on scroll — a legal page that withholds its text until it is
   scrolled to is a legal page that can be argued was not shown.

   Both language versions live in the markup and legal.js hides
   the one that is not active. With scripting off BOTH render,
   which is the correct failure mode for a document a reader is
   entitled to see.

   Load after tokens.css.
   ═══════════════════════════════════════════════════════════ */

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: 'Outfit', 'Cairo', system-ui, sans-serif;
    line-height: 1.75;
}
html[lang="ar"] body { font-family: 'Cairo', system-ui, sans-serif; }

/* ── Bar ──────────────────────────────────────────────────── */
.legal-nav {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 22px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.legal-nav .brand {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: 15px;
}
.legal-nav .brand .mark {
    width: 30px; height: 30px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--terra); color: var(--warm-white); font-size: 16px;
}
.legal-nav .spacer { margin-inline-start: auto; }
.legal-nav a.doc {
    font-size: 13.5px; color: var(--ink-soft);
    padding: 5px 10px; border-radius: var(--r-pill);
}
.legal-nav a.doc:hover { color: var(--ink); background: var(--terra-08); }
.legal-nav a.doc[aria-current="page"] {
    color: var(--terra); background: var(--terra-10); font-weight: 600;
}
.legal-nav button {
    background: none; border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 5px 11px;
    font-size: 12.5px; color: var(--ink-soft);
}
.legal-nav button:hover { border-color: var(--terra); color: var(--terra); }

/* ── Document ─────────────────────────────────────────────── */
.legal-doc {
    /* ~72 characters at this size. Legal text is read start to
       finish, and a full-width line loses the reader's place. */
    max-width: 44rem;
    margin: 0 auto;
    padding: 46px 22px 90px;
}
.legal-doc h1 {
    font-size: 30px; line-height: 1.3; margin: 0 0 6px;
    font-family: 'Lora', serif;
}
html[lang="ar"] .legal-doc h1 { font-family: 'Cairo', system-ui, sans-serif; }

.legal-doc .updated {
    font-size: 13px; color: var(--ink-soft); margin: 0 0 30px;
}
.legal-doc h2 {
    font-size: 19px; margin: 40px 0 12px; padding-top: 14px;
    border-top: 1px solid var(--line);
}
.legal-doc h3 { font-size: 15.5px; margin: 24px 0 8px; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px; padding-inline-start: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc a { color: var(--terra); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc strong { font-weight: 600; }
.legal-doc code {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: .88em; background: var(--ground);
    padding: 1px 5px; border-radius: 4px;
}

/* Anything the reader must not skim past: the not-medical-advice
   clause, the emergency number, the placeholders left for review. */
.legal-doc .callout {
    display: flex; gap: 12px;
    border: 1px solid var(--warn-line); background: var(--warn-bg);
    border-radius: var(--r-lg); padding: 14px 16px; margin: 0 0 20px;
}
.legal-doc .callout.bad { border-color: var(--bad-line); background: var(--bad-bg); }
.legal-doc .callout p:last-child { margin-bottom: 0; }

/* Contact / identity block */
.legal-doc .ident {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 16px 18px; background: var(--ground); margin-bottom: 20px;
}
.legal-doc .ident dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.legal-doc .ident dt { font-weight: 600; font-size: 13.5px; color: var(--ink-soft); }
.legal-doc .ident dd { margin: 0; font-size: 14px; }

/* Tables carry the sub-processor list and the retention schedule.
   They scroll inside their own box so the page body never does. */
.legal-doc .table-scroll { overflow-x: auto; margin: 0 0 20px; }
.legal-doc table {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
    min-width: 30rem;
}
.legal-doc th, .legal-doc td {
    border: 1px solid var(--line); padding: 9px 11px;
    text-align: start; vertical-align: top;
}
.legal-doc th { background: var(--ground); font-weight: 600; }

/* A value substituted at build time from the site's configuration —
   the legal entity, the address, the licence number, the retention
   period. Emphasised because these are the facts a reader checks,
   not because anything is wrong with them.

   They used to be `.todo` and rendered in loud red, because they were
   [[PLACEHOLDER]] tokens nothing filled in. scripts/build.js now
   substitutes every one of them and FAILS the build on any that
   survives, so an unresolved value can no longer reach a page at all.
   Anything left in the .todo style below is therefore a bug in a
   source file rather than a missing configuration value. */
.legal-doc .val { font-weight: 600; }

/* contact.html. A mailto is still a link, so it inherits the
   underline every other link in the document carries — which is
   wrong for something that is the primary action of a section.
   Sized as a real target rather than a line of text: on a phone
   these are the two things a visitor actually came here to tap. */
.legal-doc .cta {
    display: inline-block; text-decoration: none;
    background: var(--terra); color: #FFFAF5;
    padding: 11px 20px; border-radius: 9px;
    font-weight: 600; font-size: 14.5px;
    min-height: 44px; line-height: 22px;
    transition: filter .15s ease;
}
.legal-doc .cta:hover { filter: brightness(1.07); }
.legal-doc .cta:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

.legal-doc .note { font-size: 13px; color: var(--ink-soft); }

/* Kept as the last line of defence. Nothing should ever carry this
   class now — see .val above — but a subtle style for an unresolved
   value is one that gets published. */
.legal-doc .todo {
    background: var(--bad-bg); color: var(--bad);
    border: 1px dashed var(--bad-line); border-radius: 4px;
    padding: 0 5px; font-family: 'DM Mono', ui-monospace, monospace;
    font-size: .85em; font-weight: 600; white-space: nowrap;
}

.legal-foot {
    border-top: 1px solid var(--line);
    padding: 24px 22px; text-align: center;
    font-size: 13px; color: var(--ink-soft);
}
.legal-foot a { color: var(--terra); }

@media (max-width: 560px) {
    .legal-doc { padding: 30px 18px 60px; }
    .legal-doc h1 { font-size: 24px; }
    .legal-nav { gap: 10px; padding: 10px 16px; }
    .legal-nav a.doc { font-size: 12.5px; padding: 4px 8px; }
}

/* The three document links are the navigation between these pages, not
   prose links, so they get a real target on touch. Vertical padding only:
   the row already wraps, and widening them would force an extra line. */
@media (pointer: coarse) {
    .legal-nav a.doc { padding-block: 10px; }
    .legal-nav button { padding-block: 10px; }
}