/* Settings → Appearance, shared by every page (see js/appearance.js). Pages use the same color
   variables (--ink, --muted, --line, --line-soft, --road), so these rules work everywhere. */

/* text and interface size */
:root[data-size="small"] body{zoom:.92}
:root[data-size="large"] body{zoom:1.12}
:root[data-size="xlarge"] body{zoom:1.25}

/* table spacing */
:root[data-density="compact"] th,:root[data-density="compact"] td{padding-top:6px;padding-bottom:6px}

/* high contrast: darker text, stronger borders */
:root[data-contrast="high"]{--muted:#2d3a4e;--line:#7d8ba0;--line-soft:#aab5c4}
:root[data-contrast="high"][data-theme="dark"]{--ink:#ffffff;--muted:#d0dae6;--line:#6a809e;--line-soft:#4a5f7c}

/* reduce motion */
:root[data-motion="reduce"] *,:root[data-motion="reduce"] *::before,:root[data-motion="reduce"] *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}

/* easier-to-read spacing */
:root[data-spacing="wide"] body{letter-spacing:.03em;word-spacing:.12em;line-height:1.65}

/* stronger focus outline */
:root[data-focus="strong"] :focus-visible{outline:3px solid var(--road)!important;outline-offset:3px;box-shadow:0 0 0 6px color-mix(in srgb,var(--road) 25%,transparent)!important}