/* CloakDots app support pages (app.cloakdots.com) — the only stylesheet.
   Design: approved in PR #145 (#136). Tokens: spec/design/tokens-v0.json (Direction 02).
   CSP: style-src 'self' — no inline styles anywhere, no style="" attributes, no @import of other origins.
   Logical properties only (inline-start/end), so the pages are RTL-ready.
   Colour is reserved for meaning (design-system-v0 §2). These pages have no states, so no state colour appears here. */

/* ---------- Fonts: self-hosted Inter, SIL OFL 1.1 (fonts/OFL.txt). Latin + Latin Extended subset. ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-semibold.woff2") format("woff2"); }

/* ---------- Tokens (light: warm bone) ---------- */
:root {
  color-scheme: light dark;
  --cd-background: #F4F1EA;
  --cd-surface: #FBF9F5;
  --cd-surface-sunken: #ECE7DD;
  --cd-divider: #DDD6CA;
  --cd-text-primary: #0B0B0B;
  --cd-text-secondary: #66615A;
  --cd-ink: #0B0B0B;
  --cd-text-on-ink: #F4F1EA;
  --cd-texture: #A9A197;

  --cd-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* The serif is the app's display role only (CD-16): system serif, never downloaded. */
  --cd-font-display: ui-serif, "New York", "Noto Serif", Georgia, "Times New Roman", serif;

  --cd-space-xxs: 0.25rem;  /* 4 */
  --cd-space-xs: 0.5rem;    /* 8 */
  --cd-space-sm: 0.75rem;   /* 12 */
  --cd-space-md: 1rem;      /* 16 */
  --cd-space-lg: 1.5rem;    /* 24 */
  --cd-space-xl: 2rem;      /* 32 */
  --cd-space-xxl: 3rem;     /* 48 */
  --cd-space-xxxl: 4rem;    /* 64 */

  --cd-radius-sm: 0.5rem;
  --cd-radius-md: 0.75rem;
  --cd-radius-lg: 1.25rem;

  --cd-measure: 40rem;      /* ~68 characters of Inter at body size */
  --cd-page: 72rem;
  --cd-gutter: clamp(1rem, 4vw, 2.5rem);
  --cd-wordmark: 12.5rem;   /* 200 CSS px at 100%: the ® floor (CD-16). Never smaller. */
}

/* ---------- Tokens (dark: true black). Keep this block token-only. ---------- */
/* DARK-TOKENS-START */
@media (prefers-color-scheme: dark) {
  :root {
    --cd-background: #000000;
    --cd-surface: #121212;
    --cd-surface-sunken: #1C1B1A;
    --cd-divider: #2A2826;
    --cd-text-primary: #F4F1EA;
    --cd-text-secondary: #B3ABA1;
    --cd-ink: #F4F1EA;
    --cd-text-on-ink: #0B0B0B;
    --cd-texture: #6F6A63;
  }
}
/* DARK-TOKENS-END */

@media (prefers-contrast: more) {
  :root { --cd-text-secondary: var(--cd-text-primary); --cd-divider: var(--cd-texture); }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cd-background);
  color: var(--cd-text-primary);
  font-family: var(--cd-font-body);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-inline-size: 100%; block-size: auto; }
::selection { background: var(--cd-ink); color: var(--cd-text-on-ink); }

a { color: var(--cd-text-primary); text-decoration-line: underline; text-decoration-thickness: 1px;
    text-underline-offset: 0.2em; text-decoration-color: var(--cd-text-secondary); }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--cd-ink); } }
:focus-visible { outline: 2px solid var(--cd-ink); outline-offset: 3px; border-radius: 2px; }

.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* Skip link: the first focusable element on every page. */
.skip-link { position: absolute; inset-inline-start: var(--cd-space-md); inset-block-start: var(--cd-space-md); z-index: 10;
  padding: var(--cd-space-xs) var(--cd-space-md); background: var(--cd-ink); color: var(--cd-text-on-ink);
  border-radius: var(--cd-radius-sm); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.skip-link:focus-visible { transform: none; outline-color: var(--cd-ink); }

.wrap { inline-size: 100%; max-inline-size: var(--cd-page); margin-inline: auto; padding-inline: var(--cd-gutter); }

/* ---------- Header ---------- */
.site-header { border-block-end: 1px solid var(--cd-divider); }
.lang-bar { font-size: 0.8125rem; line-height: 1.4; color: var(--cd-text-secondary); }
.lang-bar .wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: var(--cd-space-sm);
  padding-block: var(--cd-space-xs); }
.lang-list { display: flex; flex-wrap: wrap; column-gap: var(--cd-space-md); row-gap: 0; margin: 0; padding: 0; list-style: none; }
.lang-list a, .lang-list [aria-current] { display: inline-block; padding-block: var(--cd-space-xs); }
.lang-list a { color: var(--cd-text-secondary); }
.lang-list [aria-current] { color: var(--cd-text-primary); font-weight: 600; }

.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--cd-space-md) var(--cd-space-xl); padding-block: var(--cd-space-lg); }
/* The wordmark is 12.5rem, capped at the container (text-only zoom at 320 px), and never below 200 px (the ® floor). */
.brand { display: inline-block; line-height: 0; text-decoration: none; min-inline-size: 200px; max-inline-size: 100%; }
.brand img, .brand picture { display: block; inline-size: var(--cd-wordmark); max-inline-size: 100%; min-inline-size: 200px;
  block-size: auto; }

/* Long compounds (DE Nutzungsbedingungen) wrap at 320 px instead of overflowing; hyphens: auto needs the page lang. */
.site-nav { min-inline-size: 0; hyphens: auto; overflow-wrap: break-word; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--cd-space-xxs) var(--cd-space-lg); margin: 0; padding: 0; list-style: none; }
.site-nav a { display: inline-block; padding-block: var(--cd-space-sm); font-weight: 500; font-size: 0.9375rem;
  text-decoration: none; color: var(--cd-text-primary); }
.site-nav a[aria-current="page"] { text-decoration-line: underline; text-decoration-thickness: 2px;
  text-underline-offset: 0.45em; text-decoration-color: var(--cd-ink); }
@media (hover: hover) { .site-nav a:hover { text-decoration-line: underline; } }

/* ---------- Main ---------- */
main { flex: 1 0 auto; padding-block: var(--cd-space-xl) var(--cd-space-xxxl); }
main:focus { outline: none; }

.page-head { max-inline-size: var(--cd-measure); margin-block-end: var(--cd-space-xl); }
.eyebrow { margin: 0 0 var(--cd-space-xs); font-size: 0.6875rem; line-height: 1.3; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cd-text-secondary); }
h1 { margin: 0; font-family: var(--cd-font-display); font-weight: 400; font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.125rem);
  line-height: 1.18; letter-spacing: -0.005em; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.lede { margin: var(--cd-space-md) 0 0; font-size: 1.0625rem; color: var(--cd-text-secondary); max-inline-size: var(--cd-measure); }
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--cd-space-xxs) var(--cd-space-lg); margin: var(--cd-space-md) 0 0; padding: 0;
  list-style: none; font-size: 0.8125rem; line-height: 1.4; color: var(--cd-text-secondary); font-variant-numeric: tabular-nums; }
.doc-meta a { color: var(--cd-text-secondary); }

/* Band shown only on the unprefixed /privacy/ /terms/ /support/ pages (English + other languages; Play takes one URL). */
.lang-band { max-inline-size: var(--cd-measure); margin-block: 0 var(--cd-space-xl); padding: var(--cd-space-md) var(--cd-space-lg);
  background: var(--cd-surface-sunken); border-radius: var(--cd-radius-md); }
.lang-band p { margin: 0 0 var(--cd-space-xxs); font-size: 0.9375rem; }
.lang-band .lang-list { column-gap: var(--cd-space-lg); font-size: 0.9375rem; font-weight: 500; }
.lang-band .lang-list a { color: var(--cd-text-primary); }

/* Notice for a previous (archived) version of a legal text. Neutral, not a warning colour. */
.notice { max-inline-size: var(--cd-measure); margin-block: 0 var(--cd-space-xl); padding: var(--cd-space-md) var(--cd-space-lg);
  border: 1px solid var(--cd-divider); border-inline-start: 4px solid var(--cd-ink); border-radius: var(--cd-radius-sm);
  background: var(--cd-surface); }
.notice p { margin: 0; }
.notice p + p { margin-block-start: var(--cd-space-xs); }

/* ---------- Long-form documents (privacy, terms, archived versions) ---------- */
/* Vertical rhythm comes from each block's own block-end margin, so an absent band or notice leaves no gap. */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.doc .toc { margin-block-end: var(--cd-space-xl); }
@media (min-width: 60em) {
  .doc { grid-template-columns: minmax(11rem, 14rem) minmax(0, var(--cd-measure)); column-gap: var(--cd-space-xxxl);
    grid-template-areas: "toc head" "toc band" "toc notice" "toc body"; grid-template-rows: auto auto auto 1fr; }
  .doc .page-head { grid-area: head; }
  .doc .lang-band { grid-area: band; }
  .doc .notice { grid-area: notice; }
  .doc > .prose { grid-area: body; }
  .doc .toc { grid-area: toc; align-self: start; position: sticky; inset-block-start: var(--cd-space-lg); margin: 0;
    padding-block-start: var(--cd-space-xs); max-block-size: calc(100vh - 3rem); overflow-y: auto; }
}
.toc { font-size: 0.875rem; line-height: 1.4; }
.toc h2 { margin: 0 0 var(--cd-space-sm); font-family: var(--cd-font-body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cd-text-secondary); }
.toc ol { margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--cd-divider); }
.toc a { display: block; padding: var(--cd-space-xs) 0 var(--cd-space-xs) var(--cd-space-md); margin-inline-start: -1px;
  border-inline-start: 1px solid transparent; color: var(--cd-text-secondary); text-decoration: none; }
@media (hover: hover) { .toc a:hover { color: var(--cd-text-primary); border-inline-start-color: var(--cd-ink); } }
@media (max-width: 59.99em) {
  .toc { padding: var(--cd-space-md) var(--cd-space-lg); background: var(--cd-surface); border: 1px solid var(--cd-divider);
    border-radius: var(--cd-radius-md); }
  .toc ol { border: 0; }
  .toc a { padding-inline-start: 0; padding-block: var(--cd-space-xs); border: 0; margin: 0; }
}
@media (max-width: 35.99em) { .lang-bar .wrap { justify-content: flex-start; } }

.prose { max-inline-size: var(--cd-measure); font-size: 1.0625rem; line-height: 1.65; }
.prose > :first-child { margin-block-start: 0; }
.prose section { scroll-margin-block-start: var(--cd-space-lg); }
.prose section + section { margin-block-start: var(--cd-space-xxl); }
.prose h2 { margin: 0 0 var(--cd-space-sm); font-size: 1.375rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em;
  text-wrap: balance; scroll-margin-block-start: var(--cd-space-lg); }
.prose h3 { margin: var(--cd-space-lg) 0 var(--cd-space-xs); font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.prose p, .prose ul, .prose ol, .prose dl { margin: 0 0 var(--cd-space-md); }
.prose ul, .prose ol { padding-inline-start: 1.35em; }
.prose li + li { margin-block-start: var(--cd-space-xs); }
.prose li::marker { color: var(--cd-text-secondary); }
.prose strong { font-weight: 600; }
.prose .secnum { font-variant-numeric: tabular-nums; color: var(--cd-text-secondary); font-weight: 500; margin-inline-end: 0.35em; }
.prose .short { padding: var(--cd-space-lg); margin-block-end: var(--cd-space-xl); background: var(--cd-surface);
  border: 1px solid var(--cd-divider); border-radius: var(--cd-radius-md); }
.prose .short ul { margin: 0; }
.prose dt { font-weight: 600; }
.prose dd { margin: 0 0 var(--cd-space-sm); }
.prose .table-scroll { overflow-x: auto; margin-block-end: var(--cd-space-md); }
.prose table, .versions table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45;
  font-variant-numeric: tabular-nums; }
.prose th, .prose td, .versions th, .versions td { padding: var(--cd-space-sm) var(--cd-space-md) var(--cd-space-sm) 0;
  text-align: start; vertical-align: top; border-block-end: 1px solid var(--cd-divider); }
.prose th, .versions th { font-weight: 600; font-size: 0.8125rem; color: var(--cd-text-secondary); }
.versions { max-inline-size: var(--cd-measure); overflow-x: auto; }

/* ---------- Support ---------- */
.support { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cd-space-xxl); max-inline-size: var(--cd-measure); }
.support h2 { margin: 0 0 var(--cd-space-sm); font-size: 1.375rem; line-height: 1.3; font-weight: 600; }
.support p { margin: 0 0 var(--cd-space-md); }
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--cd-space-md); margin: 0; padding: 0; list-style: none; }
.contact { padding: var(--cd-space-lg); background: var(--cd-surface); border: 1px solid var(--cd-divider); border-radius: var(--cd-radius-md); }
.contact h3 { margin: 0 0 var(--cd-space-xxs); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.contact p { margin: 0 0 var(--cd-space-sm); font-size: 0.9375rem; color: var(--cd-text-secondary); }
.contact .address { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.contact .address a { color: var(--cd-text-primary); }
.identity { margin: 0; border-block-start: 1px solid var(--cd-divider); }
.identity div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--cd-space-lg); padding-block: var(--cd-space-sm);
  border-block-end: 1px solid var(--cd-divider); }
@media (min-width: 36em) { .identity div { grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); } }
.identity dt { font-size: 0.875rem; color: var(--cd-text-secondary); }
.identity dd { margin: 0; font-variant-numeric: tabular-nums; }
.identity address { font-style: normal; }
/* #408: the Benelux trademark legend (ruling 36 §3 M1). Small print under the identity list; no colour, no link. */
.support .trademark { margin: var(--cd-space-md) 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--cd-text-secondary);
  hyphens: manual; }

/* Pre-launch owner-input slot (O7). scripts/web/publish_gate.py pages refuses the deploy while class="slot" is in web/dist. */
.slot { display: inline-block; padding: 0 var(--cd-space-xs); border: 1px dashed var(--cd-texture); border-radius: 4px;
  color: var(--cd-text-secondary); font-size: 0.9375em; font-style: normal; }

/* ---------- Help ---------- */
.limits { max-inline-size: var(--cd-measure); margin-block: 0 var(--cd-space-xxl); padding: var(--cd-space-lg);
  background: var(--cd-surface); border: 1px solid var(--cd-divider); border-radius: var(--cd-radius-lg); }
.limits h2 { margin: 0 0 var(--cd-space-xs); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.limits p { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.section-title { margin: 0 0 var(--cd-space-sm); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cd-text-secondary); }
.topics { max-inline-size: var(--cd-measure); margin: 0 0 var(--cd-space-xl); padding: 0; list-style: none;
  border-block-start: 1px solid var(--cd-divider); }
.topics a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--cd-space-md);
  padding-block: var(--cd-space-md); border-block-end: 1px solid var(--cd-divider); text-decoration: none; color: var(--cd-text-primary); }
.topics .t { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.topics .s { display: block; margin-block-start: var(--cd-space-xxs); font-size: 0.9375rem; line-height: 1.45; color: var(--cd-text-secondary); }
.chev { inline-size: 0.75rem; block-size: 0.75rem; fill: none; stroke: var(--cd-text-secondary); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .chev, [dir="rtl"] .back-arrow { transform: scaleX(-1); }
@media (hover: hover) { .topics a:hover .t { text-decoration: underline; text-decoration-color: var(--cd-ink); text-underline-offset: 0.2em; }
  .topics a:hover .chev { stroke: var(--cd-ink); } }

.back { display: inline-flex; align-items: center; gap: var(--cd-space-xs); margin-block-end: var(--cd-space-lg);
  padding-block: var(--cd-space-xs); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.back-arrow { inline-size: 0.875rem; block-size: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .back:hover span { text-decoration: underline; text-underline-offset: 0.2em; } }
.help-foot { max-inline-size: var(--cd-measure); margin-block-start: var(--cd-space-xxl); padding-block-start: var(--cd-space-lg);
  border-block-start: 1px solid var(--cd-divider); }
.help-foot .topics { margin-block-end: var(--cd-space-lg); }
.help-foot p { margin: 0; color: var(--cd-text-secondary); }

/* ---------- Hub (/{lang}/) and 404 ---------- */
.hub-links { max-inline-size: var(--cd-measure); }
.notfound .page-head { margin-block-end: var(--cd-space-lg); }

/* ---------- Footer ---------- */
.site-footer { border-block-start: 1px solid var(--cd-divider); background: var(--cd-surface-sunken); color: var(--cd-text-secondary);
  font-size: 0.8125rem; line-height: 1.5; }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cd-space-lg); padding-block: var(--cd-space-xl); }
@media (min-width: 48em) { .site-footer .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cd-space-xl); } }
.site-footer h2 { margin: 0 0 var(--cd-space-xs); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cd-text-secondary); }
.site-footer p, .site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-block-start: var(--cd-space-xs); }
.site-footer a { color: var(--cd-text-secondary); }
.site-footer .ver { font-variant-numeric: tabular-nums; }
.site-footer .ver b { display: block; font-weight: 600; color: var(--cd-text-primary); }

/* ---------- Consent banner (legal ruling 29 §1; docs/design/consent-banner-proposal.md + manager changes) ----------
   Only in the build while site.json analytics.enabled is true; every element ships hidden and /consent.js shows it.
   One neutral button style for every choice (B11): no accent, no icon, no primary button. Logical properties only. */
/* Long compounds (DE Datenschutzerklärung, NB informasjonskapsler) wrap at 320 px and 200 % text instead of pushing the
   page sideways: every grid/flex item may shrink (min-inline-size: 0) and words break (the nav pattern above; tester S2-1). */
.consent-bar, .consent-dialog, .cookie-settings { overflow-wrap: anywhere; hyphens: auto; }
.consent-bar .wrap, .consent-text, .consent-actions, .consent-dialog .inner, .dialog-head > *, .purpose, .purpose-head > *,
.facts div > *, .purposes { min-inline-size: 0; }
.consent-bar { background: var(--cd-surface); border-block-end: 1px solid var(--cd-divider); }
/* The bar is never taller than the screen: only the text scrolls, so Reject, Settings and Accept are visible on load at any
   text size (B9; tester S3-1). The fixed mode below caps it lower. */
.consent-bar .wrap { display: grid; gap: var(--cd-space-md); padding-block: var(--cd-space-lg);
  grid-template-rows: minmax(0, 1fr) auto; max-block-size: calc(100vh + var(--cd-space-lg));
  max-block-size: calc(100dvh + var(--cd-space-lg)); }  /* + the bottom padding: only padding may fall below the fold */
.consent-text { min-block-size: 0; overflow-y: auto; }
.consent-text h2 { margin: 0 0 var(--cd-space-xs); font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.consent-text p { margin: 0; max-inline-size: var(--cd-measure); font-size: 0.9375rem; line-height: 1.55; }
.consent-text p + p { margin-block-start: var(--cd-space-xs); }
.consent-text a { color: var(--cd-text-secondary); }

/* Stacked full width by default. consent.js adds .is-row only when all three labels fit on one line each (manager C3):
   never a wrapped label inside a row, never a 2 + 1 split. */
.consent-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cd-space-xs); align-content: end; }
.consent-actions.is-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(7.5rem, 1fr); }
.consent-actions.is-row .choice { white-space: nowrap; overflow: hidden; overflow-wrap: normal; }

.choice { min-block-size: 2.75rem; padding: var(--cd-space-xs) var(--cd-space-md); background: var(--cd-surface);
  color: var(--cd-text-primary); border: 1px solid var(--cd-text-primary); border-radius: var(--cd-radius-sm);
  font: inherit; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; text-align: center; cursor: pointer;
  min-inline-size: 0; overflow-wrap: anywhere; }
.choice:active { background: var(--cd-surface-sunken); }
@media (hover: hover) { .choice:hover { background: var(--cd-surface-sunken); } }

.text-button { min-block-size: 2.75rem; padding: 0; background: none; border: 0; color: inherit; font: inherit;
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  text-decoration-color: var(--cd-text-secondary); cursor: pointer; text-align: start; }
.site-footer .text-button { min-block-size: 0; padding-block: var(--cd-space-xxs); color: var(--cd-text-secondary); }

/* Fixed at the bottom only where there is room (em queries follow zoom: 1280 px at 200 % gets the in-flow bar). Only the
   text may scroll; the three buttons stay in view (B9, manager C5). */
@media (min-width: 48em) and (min-height: 36em) {
  .consent-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20; border-block-end: 0;
    border-block-start: 1px solid var(--cd-divider); }
  .consent-bar .wrap { max-block-size: 50vh; grid-template-rows: minmax(0, 1fr) auto;
    padding-block-end: calc(var(--cd-space-lg) + env(safe-area-inset-bottom, 0px)); }
}
/* Side by side: the text column gives way, never the buttons (manager C2). */
@media (min-width: 60em) {
  .consent-bar .wrap { grid-template-columns: minmax(0, var(--cd-measure)) max-content; grid-template-rows: minmax(0, 1fr);
    column-gap: var(--cd-space-xxl); align-items: end; }
}
html.consent-fixed body { padding-block-end: var(--cd-consent-reserve, 12rem); }
html.consent-fixed { scroll-padding-block-end: var(--cd-consent-reserve, 12rem); }

/* Layer 2: a native modal dialog the visitor opened. A bone (or black) veil, never a dark scrim over a light page. */
.consent-dialog { inline-size: min(100% - 2 * var(--cd-gutter), 36rem); max-inline-size: 100%;
  max-block-size: min(100% - 2 * var(--cd-space-lg), 52rem); margin: auto; padding: 0; overflow-y: auto;
  background: var(--cd-background); color: var(--cd-text-primary); border: 1px solid var(--cd-divider);
  border-radius: var(--cd-radius-md); }
.consent-dialog::backdrop { background: color-mix(in srgb, var(--cd-background) 75%, transparent); }
@media (max-width: 35.99em) {
  .consent-dialog { inline-size: 100%; block-size: 100%; max-block-size: 100%; border: 0; border-radius: 0; }
}
.consent-dialog .inner { display: grid; gap: var(--cd-space-lg); padding: var(--cd-space-lg); }
.dialog-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cd-space-xs) var(--cd-space-md); }
.dialog-head h2 { margin: 0; font-size: 1.375rem; line-height: 1.3; font-weight: 600; }
.dialog-head h2:focus { outline: none; }
.dialog-head h2:focus-visible { outline: 2px solid var(--cd-ink); }
.dialog-lede { margin: 0; font-size: 0.9375rem; color: var(--cd-text-secondary); }
.purposes { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--cd-divider); }
.purpose { display: grid; gap: var(--cd-space-xs); padding-block: var(--cd-space-md); border-block-end: 1px solid var(--cd-divider); }
.purpose-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cd-space-xs) var(--cd-space-md); }
.purpose h3 { margin: 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.purpose p { margin: 0; font-size: 0.9375rem; }
.facts { display: grid; gap: var(--cd-space-xxs); margin: 0; font-size: 0.8125rem; line-height: 1.45; }
/* Label beside value while the value keeps 13.5rem, else stacked: decided in rem, so it follows the reader's text size,
   not the viewport (#524; a 23.99em media query left a 54 px value column at 390 px / 200 %). */
.facts div { display: flex; flex-wrap: wrap; gap: 0 var(--cd-space-md); }
.facts dt { flex: 0 1 auto; min-inline-size: min(6.5rem, 100%); font-weight: 500; color: var(--cd-text-secondary); }
.facts dd { flex: 1 1 13.5rem; margin: 0; color: var(--cd-text-primary); }
.purpose .purpose-links { display: flex; flex-wrap: wrap; gap: var(--cd-space-xxs) var(--cd-space-md); font-size: 0.8125rem; }

/* The switch: a real button. State is a word plus the thumb position, never colour alone (B5, WCAG 1.4.1). */
.switch { display: inline-flex; align-items: center; gap: var(--cd-space-xs); min-block-size: 2.75rem; padding: 0;
  background: none; border: 0; color: var(--cd-text-primary); font: inherit; cursor: pointer; }
.switch-state { min-inline-size: 2.5em; font-size: 0.9375rem; font-weight: 600; text-align: end; }
.switch-track { position: relative; flex: none; inline-size: 2.75rem; block-size: 1.5rem; border: 2px solid var(--cd-text-primary);
  border-radius: var(--cd-radius-lg); background: transparent; }
.switch-thumb { position: absolute; inset-block-start: calc(50% - 0.5rem); inset-inline-start: 0.125rem; inline-size: 1rem;
  block-size: 1rem; border-radius: 50%; background: var(--cd-text-secondary); }
.switch[aria-checked="true"] .switch-track { background: var(--cd-ink); border-color: var(--cd-ink); }
.switch[aria-checked="true"] .switch-thumb { inset-inline-start: calc(100% - 1.125rem); background: var(--cd-text-on-ink); }
@media (prefers-reduced-motion: no-preference) { .switch-thumb { transition: inset-inline-start 120ms ease-out; } }
@media (forced-colors: active) {
  .switch-track { border-color: ButtonText; }
  .switch-thumb { background: ButtonText; }
  .switch[aria-checked="true"] .switch-track { background: Highlight; border-color: Highlight; }
  .switch[aria-checked="true"] .switch-thumb { background: HighlightText; }
}

/* The floating "Cookie settings" button (B13): once a choice exists, small and calm, trailing bottom corner, no motion. */
.cookie-settings { position: fixed; inset-inline-end: var(--cd-space-md); z-index: 15;
  inset-block-end: calc(var(--cd-space-md) + env(safe-area-inset-bottom, 0px));
  max-inline-size: calc(100vw - 2 * var(--cd-space-md)); min-block-size: 2.75rem; padding: var(--cd-space-xs) var(--cd-space-md);
  background: var(--cd-surface); color: var(--cd-text-primary); border: 1px solid var(--cd-divider); border-radius: var(--cd-radius-lg);
  font: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; text-align: center; cursor: pointer; }
@media (hover: hover) { .cookie-settings:hover { border-color: var(--cd-text-primary); } }
/* Measured by consent.js (manager C4); 6rem if the measurement can't run. */
html.has-cookie-settings body { padding-block-end: var(--cd-cookie-reserve, 6rem); }
html.has-cookie-settings { scroll-padding-block-end: var(--cd-cookie-reserve, 6rem); }

/* "Cookie settings" above the TOC on the current privacy page (B13, manager C4). */
.consent-page { margin: 0 0 var(--cd-space-lg); }
.consent-page:has(> [hidden]) { display: none; }
@media (min-width: 60em) {
  .doc:has(> .consent-page) { grid-template-areas: "consent head" "toc band" "toc notice" "toc body";
    grid-template-rows: auto auto auto 1fr; }
  .doc > .consent-page { grid-area: consent; align-self: start; }
}

/* ---------- Motion, print ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print {
  .lang-bar, .site-nav, .skip-link, .toc, .lang-band, .consent-bar, .consent-dialog, .cookie-settings, .consent-page,
  .site-footer .text-button { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-footer { background: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .prose section { break-inside: avoid-page; }
}