/* Shared styling for /privacy and /terms.
 *
 * One stylesheet rather than two copies inline: these documents will be edited by whoever has to
 * change a fact in them, and a fact should not have to be changed twice. The palette is the app's
 * own (`--bg`/`--ink`/`--ink2` from index.html) so the pages read as part of the product rather than
 * as a legal appendix bolted on — a reviewer following the in-app link should land somewhere that
 * obviously belongs to the app they are reviewing.
 *
 * Left-aligned and measured, unlike index.html: this is prose to be read, not a splash. */
:root {
  --bg: #f4f0e7;
  --card: #fffdf8;
  --ink: #3b2a20;
  --ink2: #8b7c70;
  --line: rgba(59, 42, 32, 0.12);
  --accent: #c2764a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1613;
    --card: #221d19;
    --ink: #f3ede5;
    --ink2: #c6b7aa;
    --line: rgba(243, 237, 229, 0.14);
    --accent: #d99163;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-rounded, -apple-system, "Nunito", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* `viewport-fit=cover` plus the safe-area inset, because the most likely way anyone reads this is
     in an in-app browser on a phone with a notch. */
  padding: max(24px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom));
}

main { max-width: 34rem; margin: 0 auto; }

header { margin-bottom: 32px; }
header .mark { font-size: 40px; }
h1 { font-size: 26px; font-weight: 800; margin: 12px 0 4px; letter-spacing: -0.2px; }
.dates { color: var(--ink2); font-size: 13px; margin: 0; }

h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 34px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { font-size: 15px; font-weight: 700; margin: 20px 0 4px; }

p, li { color: var(--ink); margin: 0 0 12px; }
ul { padding-left: 20px; }
li { margin-bottom: 6px; }
strong { font-weight: 700; }
a { color: var(--accent); text-underline-offset: 2px; }

/* The one thing a reader is looking for, and the one thing a reviewer checks for. */
.callout {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 20px 0;
}
.callout p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; }

footer { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink2); font-size: 13px; }
footer a { color: var(--ink2); }