/* Hallmark · shape: Long Document and Card (kept) · genre: modern-minimal · theme: Wayfind (deal 2/3, seed personeelsplanning-platform-voor-horeca-cabf·6c80fbdc·2026-11-08·r0) · redesign: full
 * hero: none · nav: none · footer: kept · imagery: none · signature: the store buttons as square signs with a 2px ink border · wayfind: platform, night by system setting
 * axes: light/mono/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S3 R4 V4 · weakest: S, utility pages stay quiet on purpose; the buttons and borders carry the theme */
/* Hallmark · waive 64 · Chivo Mono is the theme's material, the whole page is set in the board's face */
@import url("./tokens.css?v=3");
@import url("./base.css?v=3");

:root {
  --text-2xs: 0.75rem;
  --text-display-s: clamp(2rem, 2.6vw + 1rem, 3.5rem);
  --color-paper-lift: var(--color-paper-3);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-paper: oklch(15% 0.012 262); --color-paper-2: oklch(19% 0.013 262); --color-paper-3: oklch(22% 0.014 262);
    --color-ink: oklch(96% 0.005 250); --color-ink-2: oklch(86% 0.006 250); --color-muted: oklch(74% 0.01 255);
    --color-rule: oklch(31% 0.014 262); --color-ink-rule: oklch(31% 0.014 262);
    --color-accent: oklch(62% 0.2 264); --color-accent-ink: oklch(99.5% 0.003 250); --color-focus: oklch(72% 0.17 264);
  }
}
ul { margin: 0; padding: 0; list-style: none; }
body { font-variant-numeric: tabular-nums; }
h3 { font-weight: 800; }

/* ---------- Buttons ---------- */
.btn { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-ink); background: transparent; color: var(--color-ink); font: 800 var(--text-sm) / 1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1), border-color var(--dur-micro) steps(1); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { background: var(--color-ink-2); border-color: var(--color-ink-2); color: var(--color-paper); }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn.primary:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn.primary:active { background: var(--color-ink-2); border-color: var(--color-ink-2); }

/* ---------- Download card ---------- */
.card-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-lg) var(--space-md); }
.card { color: var(--color-ink); width: 100%; max-width: 440px; background: var(--color-paper-3); border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-card); padding: var(--space-xl) var(--space-lg); text-align: center; }
.logo { display: block; width: 200px; max-width: 70%; height: auto; margin: 0 auto var(--space-xl); }
.logo .l1 { fill: var(--color-ink); }
.logo .l2 { fill: var(--color-accent); }
.card h1 { font-size: var(--text-2xl); margin: 0 auto var(--space-xs); }
.card p { color: var(--color-muted); margin: 0 auto var(--space-lg); }
.buttons { display: flex; flex-direction: column; gap: var(--space-sm); }
.hint { font-size: var(--text-sm); margin: var(--space-lg) 0 0; }
.spinner { width: 28px; height: 28px; margin: 0 auto var(--space-md); border: 3px solid var(--color-rule); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.8s linear infinite; display: none; }
.redirecting .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--color-accent); } }

/* ---------- Privacy document ---------- */
.doc-wrap { max-width: 820px; margin: 0 auto; padding: var(--space-2xl) var(--space-md) var(--space-3xl); }
.doc-wrap > header { border-bottom: var(--rule-bar) solid var(--color-ink); padding-bottom: var(--space-lg); margin-bottom: var(--space-xl); }
.doc-wrap h1 { font-size: var(--text-display-s); max-width: none; margin-bottom: var(--space-md); }
.intro { color: var(--color-muted); }
a { color: var(--color-accent); }
nav.toc { background: var(--color-paper-3); border: var(--rule-bar) solid var(--color-ink); padding: var(--space-lg); margin-bottom: var(--space-xl); }
nav.toc h2 { font-size: var(--text-md); font-weight: 800; letter-spacing: 0; color: var(--color-ink); margin: 0 0 var(--space-xs); }
nav.toc ol { margin: 0; padding-left: var(--space-lg); columns: 2; column-gap: var(--gap-columns); }
nav.toc li { break-inside: avoid; margin-bottom: var(--space-3xs); }
@media (max-width: 600px) { nav.toc ol { columns: 1; } }
section { margin-bottom: var(--space-xl); scroll-margin-top: var(--space-md); }
section h2 { font-size: var(--text-xl); max-width: none; margin: 0 0 var(--space-sm); }
section h2 .num { margin-right: var(--space-xs); }
.doc-wrap ul { padding-left: var(--space-lg); list-style: disc; }
.doc-wrap li { margin-bottom: var(--space-xs); }
.table-wrap { overflow-x: auto; border: var(--rule-bar) solid var(--color-ink); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
th { background: var(--color-paper-2); font-weight: 800; border-bottom: var(--rule-bar) solid var(--color-ink); }
tr:last-child td { border-bottom: none; }
td:first-child { font-weight: 500; width: 34%; }
address { font-style: normal; background: var(--color-paper-3); border: var(--rule-bar) solid var(--color-ink); padding: var(--space-md) var(--space-lg); }
.doc-wrap footer { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }