/*
 * Shared styles for the SIMNOVA content pages (content.getsimnova.com).
 * Deliberately plain: readable legal/help text, no animation, no framework.
 * Referenced with an absolute path so it resolves from every page depth,
 * including future localized paths like /de/privacy/.
 *
 * Light and dark, chosen by the OS, because the app is. Every colour is a
 * variable defined once for light on :root and redefined for dark in the
 * prefers-color-scheme block — never a literal in a rule below, or the page
 * ends up half-themed. Values are the Nova Muted tokens from DesignTokens.kt
 * (ActivePalette), so the page background is the app background in both modes.
 */

:root {
  /* `light dark`, not `only light`: it tells the browser the page has its own
     dark styles, so Android WebView renders them instead of algorithmically
     darkening the light ones, and form controls and scrollbars follow. */
  color-scheme: light dark;

  --ink: #1e1a2b;        /* body text      — Ink        */
  --ink-mute: #57506e;   /* secondary text — InkMute    */
  --link: #7e3a9e;       /* links, accents — OrchidText */
  --border: #e4e1ec;     /*                — BorderHair */
  --bg: #f3f1f7;         /* app background — SurfaceBase */
  --bg-soft: #e9e6f0;    /* note blocks    — SurfaceMute */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ebe8f2;
    --ink-mute: #9a93ac;
    --link: #c184d8;     /* #7e3a9e is a light-mode-only value */
    --border: #2a2438;
    --bg: #100d18;
    --bg-soft: #2a2438;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 20px 64px;
}

h1 { font-size: 1.55rem; line-height: 1.25; margin: 24px 0 4px; }
h2 { font-size: 1.15rem; margin: 30px 0 8px; }
h3 { font-size: 1rem;    margin: 20px 0 6px; }

p, li { margin: 8px 0; }

a { color: var(--link); }

/* "Last updated" sits at the foot of the document, above the footer rule. */
.updated { color: var(--ink-mute); font-size: 0.9rem; margin: 24px 0 0; }
.lead    { color: var(--ink-mute); font-size: 1.05rem; }

ul, ol { padding-left: 22px; }
li { margin: 6px 0; }

hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* Help page question blocks. */
.faq {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 24px;
}
.faq h2 { margin-top: 8px; }

.note {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 16px 0;
  color: var(--ink-mute);
  font-size: 0.95rem;
}

footer {
  color: var(--ink-mute);
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
  margin-top: 44px;
  padding-top: 16px;
}
footer a { color: var(--ink-mute); }