/* ألوك — THE PUBLIC LEGAL PAGE (/privacy and /terms).
   Tokens, type and colours all come from auth.css (the shared design system);
   this file only adds what a LONG DOCUMENT needs and the console shell does
   not: a measured line length, a heading rhythm, and a print stylesheet.

   No login, no console chrome — the App Store and Play listings link straight
   here, and so does the sign-in screen. */

body {
  /* auth.css pins html,body to 100% for the console's flex shell; a document
     has to be allowed to be taller than the window. */
  height: auto;
  min-height: 100%;
  background: var(--bg);
}

/* READABLE LINE LENGTH is the whole point of this page. 34em lands around
   65–75 characters in both faces, which is where long prose stops being work. */
.legal-wrap {
  max-width: 34em;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s6);
}

/* ------------------------------------------------------------------ header */
.legal-top {
  padding-bottom: var(--s4);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}
.legal-brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: inherit;
}
.legal-brand img { width: 44px; height: 44px; border-radius: var(--r-btn); object-fit: cover; }
.legal-brand-txt { display: flex; flex-direction: column; line-height: 1.35; }
.legal-brand strong { font-size: 18px; font-weight: 700; }
.legal-brand small { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------- the language flip */
/* Fixed rather than absolute so it survives the scroll of a ten-screen policy.
   Mirrors the .auth-langtoggle shape so the sign-in screen and this page read
   as the same product. */
.lang-toggle {
  position: fixed; top: var(--s4); inset-inline-end: var(--s4); z-index: 5;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  font-size: 12px; font-weight: 600; height: 32px; padding: 0 var(--s3);
  border-radius: var(--r-btn);
}
.lang-toggle:hover { background: var(--accent-weak); border-color: var(--accent-weak); }

/* -------------------------------------------------------------- the document */
.legal-state { color: var(--muted); font-size: 14px; padding: var(--s5) 0; }
.legal-state:empty { display: none; }

.legal-doc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s6) var(--s5);
}
.legal-which {
  margin: 0 0 var(--s2);
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  color: var(--accent);
}
.legal-title { margin: 0 0 var(--s2); font-size: 24px; font-weight: 700; line-height: 1.35; }
.legal-meta { margin: 0; font-size: 13px; color: var(--muted); }
.legal-summary {
  margin: var(--s4) 0 0; font-size: 14px;
  background: var(--accent-weak); color: var(--accent-press);
  border-radius: var(--r-btn); padding: var(--s3) var(--s4);
}

/* The rendered body. Everything inside is built by legal.js from ESCAPED text
   (see renderLegalBody) — the only tags here are the ones it writes. */
.legal-prose { margin-top: var(--s5); }
.legal-prose h2 {
  font-size: 17px; font-weight: 600; color: var(--accent-press);
  margin: var(--s6) 0 var(--s2);
}
.legal-prose h3 { font-size: 15px; font-weight: 600; margin: var(--s5) 0 var(--s2); }
.legal-prose h4 { font-size: 14px; font-weight: 600; margin: var(--s4) 0 var(--s1); }
.legal-prose > :first-child { margin-top: 0; }
.legal-prose p { margin: 0 0 var(--s3); line-height: 1.85; }
/* Lists are authored only by the static pages (/delete-account); the API-backed
   renderer never emits one. Styled here so the two public surfaces match. */
.legal-prose ul { margin: 0 0 var(--s4); padding-inline-start: 1.3em; }
.legal-prose li { margin-bottom: var(--s2); line-height: 1.7; }
.legal-prose a { color: var(--accent); text-decoration: none; font-weight: 600; }
.legal-prose a:hover { text-decoration: underline; }
.legal-prose strong { font-weight: 600; }
.legal-prose em { font-style: normal; color: var(--accent-press); }

/* ------------------------------------------------------------------- the way out */
.legal-nav {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s5);
}
.legal-link {
  color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: var(--s2) var(--s4); background: var(--surface);
}
.legal-link:hover { background: var(--accent-weak); border-color: var(--accent-weak); }

.legal-foot { margin-top: var(--s5); text-align: center; font-size: 12px; color: var(--muted); }
.legal-foot p { margin: 0; }

/* ------------------------------------------------------------------- print */
/* A policy that cannot be printed or saved as PDF is a policy somebody cannot
   keep a copy of — and keeping a copy of what you agreed to is the point. */
@media print {
  .lang-toggle, .legal-nav { display: none !important; }
  body { background: #fff; }
  .legal-wrap { max-width: none; padding: 0; }
  .legal-doc { border: 0; padding: 0; background: #fff; }
  .legal-summary { background: #fff; border: 1px solid #ccc; color: inherit; }
  .legal-prose h2, .legal-prose h3, .legal-prose h4 { break-after: avoid; page-break-after: avoid; }
  .legal-prose p { break-inside: avoid; page-break-inside: avoid; }
}