/* Shared by /privacy and /privacybeleid.
 *
 * A deliberately small stylesheet rather than a copy of the about-page's 740
 * lines: this is a prose document with no hero, no scroll reveal and no map,
 * and the only thing it needs from that page is the palette — so it takes the
 * tokens and nothing else. Same tokens as the sign-in page and the app; see
 * _AUTH_PAGE in backend/app.py.
 *
 * Served from /privacy/_shared.css and referenced by BOTH pages, including the
 * Dutch one. That is on purpose: two copies drift, and the language of a page
 * has nothing to do with its stylesheet. It has to be reachable without a
 * session for the same reason the pages do — see _password_gate.
 */
:root {
  --ink:#16212e; --ink-raised:#1f2d3d; --ink-line:#2c3c4f;
  --text:#e8edf4; --text-dim:#8a93a6; --prose:#c6cedb;
  --action:#ff7a1a;
  --font-display:'Archivo',sans-serif; --font-body:'IBM Plex Sans',sans-serif;
  --measure:68ch;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--prose);
       font-family:var(--font-body); font-size:16px; line-height:1.66;
       -webkit-text-size-adjust:100%; }
.wrap { max-width:var(--measure); margin:0 auto;
        padding:0 clamp(1.1rem,5vw,2rem); }

a { color:var(--text); text-decoration-color:var(--ink-line);
    text-underline-offset:3px; }
a:hover { text-decoration-color:var(--action); }

/* ---- masthead: the way back, and the other language ------------------- */
.top { border-bottom:1px solid var(--ink-line); padding:1.1rem 0; }
.top .wrap { display:flex; align-items:baseline; gap:1rem; }
.mark { font-family:var(--font-display); font-weight:800; font-size:1rem;
        letter-spacing:.01em; color:var(--text); text-decoration:none;
        margin-right:auto; }
.mark span { color:var(--action); }
.top a.alt { color:var(--text-dim); font-size:.88rem; }

header.doc { padding:clamp(2.4rem,7vw,3.6rem) 0 .6rem; }
h1 { font-family:var(--font-display); font-weight:800; color:var(--text);
     font-size:clamp(1.9rem,6vw,2.7rem); line-height:1.12; margin:0 0 .9rem;
     letter-spacing:-.01em; }
.lede { font-size:1.08rem; color:var(--text-dim); margin:0 0 .5rem; }
.updated { color:var(--text-dim); font-size:.86rem; margin:0;
           font-variant-numeric:tabular-nums; }

main { padding:1.2rem 0 1rem; }
h2 { font-family:var(--font-display); font-weight:700; color:var(--text);
     font-size:1.22rem; line-height:1.3; margin:2.6rem 0 .7rem; }
h3 { font-family:var(--font-body); font-weight:600; color:var(--text);
     font-size:1rem; margin:1.6rem 0 .4rem; }
p { margin:0 0 .95rem; }
ul { margin:0 0 .95rem; padding-left:1.15rem; }
li { margin:0 0 .4rem; }
li > strong, p > strong { color:var(--text); font-weight:600; }
code { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.9em;
       color:var(--text); background:var(--ink-raised); padding:.1em .35em;
       border-radius:4px; }

/* A statement of what is NOT done deserves to look different from the
   statements of what is — it is the part a reader is least likely to believe
   and most likely to be looking for. */
.callout { border:1px solid var(--ink-line); border-left:3px solid var(--action);
           background:var(--ink-raised); border-radius:8px;
           padding:1rem 1.2rem; margin:1.4rem 0; }
.callout p:last-child { margin-bottom:0; }

/* Placeholders that must not reach production. Loud on purpose: the failure
   mode for a privacy policy is shipping one with a blank in it, and a blank
   that looks like prose is a blank that ships. */
.fill { background:#ff7a1a; color:#1b1205; font-weight:700;
        padding:.05em .4em; border-radius:4px; }

footer { border-top:1px solid var(--ink-line); margin-top:3rem;
         padding:1.6rem 0 3rem; color:var(--text-dim); font-size:.9rem; }
footer a { color:var(--text-dim); }
footer p { margin:0; }