/* ============================================================
   WashCanvas legal pages: shared stylesheet.

   ONE COPY, LINKED BY BOTH privacy.html AND terms.html, rather than
   the same rules pasted into each. Hand-copied styles drift, and two
   legal pages that stop matching each other look careless on exactly
   the pages where looking careless costs most.

   This is a real stylesheet rather than a shared HTML fragment on
   purpose: every file in this repo's root is served, so an .html
   "include" would deploy as a reachable page of its own.

   Tokens are copied from index.html so a legal page looks like the
   site. Cool wet-glass neutrals, one accent (water cyan).
   ============================================================ */

/* THEME HANDLING MATCHES THE HOME PAGE and is deliberately in four
   blocks: a bare :root light palette, a prefers-color-scheme override
   for viewers on system default, and explicit data-theme blocks so an
   explicit choice wins in both directions. A colour defined only
   inside a media query would leave the page borrowing whatever the
   host painted behind it. */
:root {
  --paper:#EEF2F3; --paper-2:#E3EAEC; --card:#FBFDFD;
  --ink:#0A2027; --ink-2:#2C4650; --muted:#5E7681;
  --deep:#0B4351; --accent:#0E8FA8; --accent-soft:#D3EDF3; --mist:#8FD4E2;
  --line:rgba(10,32,39,.12); --line-2:rgba(10,32,39,.22);
  --shadow-sm:0 8px 22px rgba(10,32,39,.07);
  --grid-ink:rgba(10,32,39,.045);
  --display:"Plus Jakarta Sans","Segoe UI Variable Display","Inter",system-ui,-apple-system,sans-serif;
  --body:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --gutter:22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#071A20; --paper-2:#0A2329; --card:#0E2C34;
    --ink:#E4EEF0; --ink-2:#B4CBD1; --muted:#7E9AA3;
    --deep:#072830; --accent:#3FB6CE; --accent-soft:#123946;
    --line:rgba(200,228,234,.14); --line-2:rgba(200,228,234,.26);
    --shadow-sm:0 8px 22px rgba(0,0,0,.34);
    --grid-ink:rgba(200,228,234,.05);
  }
}
:root[data-theme="dark"] {
  --paper:#071A20; --paper-2:#0A2329; --card:#0E2C34;
  --ink:#E4EEF0; --ink-2:#B4CBD1; --muted:#7E9AA3;
  --deep:#072830; --accent:#3FB6CE; --accent-soft:#123946;
  --line:rgba(200,228,234,.14); --line-2:rgba(200,228,234,.26);
  --shadow-sm:0 8px 22px rgba(0,0,0,.34);
  --grid-ink:rgba(200,228,234,.05);
}
:root[data-theme="light"] {
  --paper:#EEF2F3; --paper-2:#E3EAEC; --card:#FBFDFD;
  --ink:#0A2027; --ink-2:#2C4650; --muted:#5E7681;
  --deep:#0B4351; --accent:#0E8FA8; --accent-soft:#D3EDF3;
  --line:rgba(10,32,39,.12); --line-2:rgba(10,32,39,.22);
  --shadow-sm:0 8px 22px rgba(10,32,39,.07);
  --grid-ink:rgba(10,32,39,.045);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px),
    var(--paper);
  background-size: 46px 46px, 46px 46px, auto;
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(1160px, 100% - (var(--gutter) * 2)); margin-inline: auto; }

.nav { border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 74px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.045em; }
.wordmark:hover { text-decoration: none; }
.wm-mark { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; background: var(--deep); display: grid; place-items: center; }
.wm-mark svg { display: block; }
.wm-wash { color: var(--ink); }
.wm-canvas { color: var(--accent); }
.nav-alt { font-size: 13px; font-weight: 700; color: var(--muted); }
.nav-alt:hover { color: var(--accent); }

.doc { width: min(720px, 100% - (var(--gutter) * 2)); margin-inline: auto; padding: 54px 0 90px; }
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
h1 { font-family: var(--display); font-size: clamp(36px, 5vw, 52px); line-height: 1.03; letter-spacing: -.05em; margin: 10px 0 8px; }
h1 .accent { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; color: var(--accent); }
.updated { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 32px; }
h2 { font-family: var(--display); font-size: 22px; letter-spacing: -.035em; margin: 38px 0 10px; }
p, li { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
ul { padding-left: 21px; margin: 10px 0; }
li { margin-bottom: 8px; }
.card { background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; padding: 17px 19px; box-shadow: var(--shadow-sm); margin: 17px 0; }
.card p { margin: 0; }
.legalese { background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; padding: 17px 19px; box-shadow: var(--shadow-sm); margin: 17px 0; }
.legalese p { margin: 0; font-size: 14.5px; line-height: 1.62; }
.toc { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow-sm); }
.toc ol { margin: 0; padding-left: 19px; }
.toc li { margin-bottom: 4px; font-size: 14px; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; margin-top: 50px; border-top: 1px solid var(--line); }
.foot-inner p { margin: 0; font-size: 13px; color: var(--muted); }
.foot-inner nav { display: flex; gap: 18px; font-size: 13px; }
.foot-inner nav a { color: var(--muted); }
.foot-inner nav a:hover { color: var(--accent); }
@media (max-width: 640px) { .doc { padding-top: 34px; } }