/* ============================================================================
   Nasaq legal pages — privacy.html, terms.html and their Arabic pairs.
   Requires tokens.css and site.css to be linked first.

   site.css has no long-form prose styles: every existing page is composed of
   panels, grids and short blocks. These pages are the first continuous reading
   surface on the site, so the measure, the vertical rhythm and the list styles
   live here rather than being bolted onto the shared sheet.

   Tokens only, logical properties only (DESIGN.md, non-negotiables 1 and 4).
   ============================================================================ */

.legal{ padding-block:56px 88px; }
.legal .wrap{ max-width:760px; }

/* ---------- masthead ---------- */
.legal-head{ padding-block-end:32px; border-block-end:1px solid var(--border-subtle); }
.legal-head h1{ font-size:var(--text-2xl); }
.legal-meta{
  margin-block-start:12px;
  font-size:var(--text-sm); color:var(--text-secondary);
  display:flex; gap:8px 20px; flex-wrap:wrap;
}
.legal-lede{
  margin-block-start:20px;
  font-size:var(--text-lg); color:var(--text-secondary);
  line-height:var(--leading-body);
}

/* ---------- prose ---------- */
.legal-body{ margin-block-start:40px; }
.legal-body section + section{ margin-block-start:40px; }
.legal-body h2{
  font-size:var(--text-xl);
  margin-block-end:12px;
}
.legal-body h3{
  font-size:var(--text-base);
  margin-block:24px 8px;
}
.legal-body p + p{ margin-block-start:12px; }
.legal-body p{ color:var(--text-secondary); }
.legal-body strong{ color:var(--text-primary); font-weight:600; }

.legal-body ul{
  margin-block:12px 0; padding-inline-start:22px;
  color:var(--text-secondary);
}
.legal-body li + li{ margin-block-start:8px; }
.legal-body li::marker{ color:var(--text-muted); }

.legal-body a{
  color:var(--action);
  text-decoration:underline; text-underline-offset:3px;
}
.legal-body a:hover{ color:var(--action-hover); }

/* Inline definition rows: "Account details — name, email, ...". A list rather
   than a table so it reflows on a phone without a horizontal scroller. */
.legal-defs{ list-style:none; padding-inline-start:0; margin-block-start:16px; }
.legal-defs li{
  padding-block:12px;
  border-block-start:1px solid var(--border-faint);
}
.legal-defs li:last-child{ border-block-end:1px solid var(--border-faint); }
.legal-defs dfn{
  display:block; font-style:normal; font-weight:600;
  color:var(--text-primary); font-size:var(--text-sm);
}
.legal-defs span{ display:block; margin-block-start:4px; }

/* ---------- callout ---------- */
/* Used for the two commitments a reader should not have to hunt for: what the
   AI provider does with their text, and how to have everything deleted. */
.legal-note{
  margin-block-start:20px;
  padding:20px 24px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.legal-note p{ color:var(--text-primary); }
.legal-note p + p{ margin-block-start:8px; }

/* ---------- contents ---------- */
.legal-toc{
  margin-block-start:32px; padding:20px 24px;
  background:var(--surface-base);
  border-radius:var(--radius-md);
}
.legal-toc h2{ font-size:var(--text-sm); margin-block-end:12px; color:var(--text-secondary); }
.legal-toc ol{
  margin:0; padding-inline-start:20px;
  font-size:var(--text-sm); color:var(--text-secondary);
  columns:2; column-gap:32px;
}
.legal-toc li{ margin-block-end:6px; break-inside:avoid; }
.legal-toc a{ text-decoration:none; }
.legal-toc a:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  .legal-toc ol{ columns:1; }
  .legal{ padding-block:40px 64px; }
}

/* ---------- cross-link between the two documents ---------- */
.legal-sibling{
  margin-block-start:56px; padding-block-start:32px;
  border-block-start:1px solid var(--border-subtle);
  font-size:var(--text-sm); color:var(--text-secondary);
}

/* ---------- Arabic deltas ---------- */
[lang="ar"] .legal-body h2,
[lang="ar"] .legal-body h3,
[lang="ar"] .legal-defs dfn{ font-weight:700; }
[lang="ar"] .legal-body{ line-height:1.9; }