/* The five public document pages (terms, privacy, popia, paia, delete-account), 29 Oct 2026.
   Jason: "it goes to another page that isn't branded the same as BAT". These pages now use
   the account area's look: the light header with the logo (account.css .topbar / .brand),
   the app's "‹ Back" control, the same colours (light and dark — the theme you picked in
   the account area carries over) and the same cards. Loaded AFTER each page's own <style>,
   so it wins; the document text itself is untouched.
   Colour values: the same as account.css + app-match.css. */
:root {
  color-scheme: light;
  --ink:#002454; --ink-soft:#2A2F3A; --muted:#5B6472; --line:#E6E8EC; --bg:#F4F5F7; --surface:#FFFFFF;
  --accent:#E20028; --blue:#2E6BE6; --red-bg:#FDECEC; --grey-bg:#EEF0F3;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:#E8ECF3; --ink-soft:#D3D9E2; --muted:#8A93A2; --line:#242B37; --bg:#0F141C; --surface:#1A2130;
  --accent:#FF5A6E; --blue:#6B9BFF; --red-bg:#3A1E20; --grey-bg:#242B37;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --ink:#E8ECF3; --ink-soft:#D3D9E2; --muted:#8A93A2; --line:#242B37; --bg:#0F141C; --surface:#1A2130;
    --accent:#FF5A6E; --blue:#6B9BFF; --red-bg:#3A1E20; --grey-bg:#242B37;
  }
}
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--bg); color: var(--ink-soft); font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif; }

/* header: the account area's top bar — light surface, a hairline, the logo */
header.lg-top { background: var(--surface); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
header.lg-top .wrap { max-width: 820px; margin: 0 auto; padding: 8px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
header.lg-top a { margin: 0; color: var(--ink); text-decoration: none; }
header.lg-top a:hover { color: var(--ink); text-decoration: none; }
header.lg-top .lg-back { justify-self: start; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-left: -4px;
  font-size: 15px; font-weight: 600; color: var(--ink); }
header.lg-top .lg-back svg { display: block; }
header.lg-top .lg-back .io-s { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
header.lg-top .lg-brand { display: block; line-height: 0; }
header.lg-top .lg-brand img { height: 36px; width: auto; display: block; }
@media (min-width: 761px) { header.lg-top .wrap { padding: 10px 24px; } header.lg-top .lg-brand img { height: 44px; } }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* the page: the account area's type and cards */
main { padding: 28px 16px 64px; }
@media (min-width: 761px) { main { padding: 40px 24px 80px; } }
.eyebrow { color: var(--accent); }
h1 { color: var(--ink); font-weight: 700; letter-spacing: -.4px; }
@media (max-width: 760px) { h1 { font-size: 26px; } }
.updated { color: var(--muted); }
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); }
@media (max-width: 760px) { .doc { padding: 20px; font-size: 14px; line-height: 21px; } }
.doc h2, .doc h3, .doc b, .doc strong { color: var(--ink); }
.doc th, .doc td { border-color: var(--line); }
.doc th { background: var(--grey-bg); }
.doc table { display: block; overflow-x: auto; }
.callout { background: var(--red-bg); border: 0; border-left: 4px solid var(--accent); border-radius: 12px; }
a { color: var(--blue); font-weight: 600; }
footer { color: var(--muted); padding-left: 16px; padding-right: 16px; }
footer a { color: var(--muted); font-weight: 400; }

/* audit 18: long words (e.g. POPIAComplaints@inforegulator.org.za) wrap instead of pushing the page sideways at 320 px */
.doc, footer { overflow-wrap: anywhere; word-break: break-word; }