/* ============================================================
 *  togo-page-legal.css
 *  ------------------------------------------------------------
 *  Long-form reading polish voor alle juridische / beleids- /
 *  compliance-pagina's:
 *
 *    legal · privacy · terms · cookie-policy · cookie-audit
 *    gdpr-rights · dmca · imprint · security-policy
 *    security-acknowledgments · research-use · research-frame-guide
 *    compliance-eu · compliance-shipping · compliance-calendar
 *
 *  Scoped per page via body[data-page="..."] — nooit globaal.
 *  Geladen NA togo-final-polish.css zodat het wint op conflict.
 *
 *  Token-only — geen hardcoded kleuren. Respecteert:
 *    • prefers-reduced-motion
 *    • light theme via html[data-theme="light"]
 *    • print stylesheet basics (@media print)
 *
 *  Created: 2026-05-22
 * ============================================================
 *
 *  Issues addressed (legal pages are long, dense, and currently
 *  rely on duplicate inline styles + `<h2 class="section__title">`
 *  for every heading — which kills hierarchy on a 30-section page):
 *
 *   1.  Long-form body text reads cramped on desktop (line-height
 *       1.55 default, paragraph spacing tiny inside .stack-lg). We
 *       want 1.65 + 16-20px between paragraphs voor leesbaarheid.
 *   2.  Every `<h2>` is `section__title` (text-3xl) — there is no
 *       visible H2 vs H3 hierarchy when sections nest. We clamp
 *       the article-level H2/H3 down + give H3 its own scale.
 *   3.  Lists (`<ul>/<ol>`): bullets are invisible in light mode
 *       on cream bg, and item-spacing varies between pages
 *       (sommige hebben 4px, andere 8px, sommige geen). We pin
 *       6-10px en zorgen dat bullets/numbers altijd zichtbaar zijn.
 *   4.  TOC / in-page anchor links (`<div id="...">`): klikken
 *       op een anchor scrollt het target ONDER de sticky header.
 *       `scroll-margin-top: 96px` op alle anchor-targets fixt dit.
 *   5.  Inline-styled tables (cookie-audit heeft 3 tables met 1000+
 *       chars aan inline `style="..."`): geen zebra stripes, geen
 *       hover-affordance, mobile overflow-x via wrapper maar de
 *       table breekt nog steeds rare cells. Zebra via color-mix,
 *       sticky header op desktop, comfortabele mobile breakpoint.
 *   6.  Citation refs / PMID pills / <code> blocks: `<code>` heeft
 *       geen background in legal flow, mengt met body text. We
 *       geven het een subtle pill-look met token-bg.
 *   7.  Light mode: kleine grijze legal-text in lists (--color-text-soft
 *       met inline style) zakt op cream paper-bg onder 4.5:1
 *       contrast voor 0.88rem footnote-text. We forceren een diepere
 *       text-tone voor list-items in light mode.
 *   8.  Mobile reading width: max-width:820px inline werkt, maar
 *       de container heeft op mobile geen padding-inline → tekst
 *       raakt de schermrand. We pinnen min padding 16px op mobile.
 *   9.  `<pre>` blocks in dmca.html / security-policy gebruiken
 *       --color-surface-alt (token bestaat niet) → fallback faalt
 *       op light mode, geeft donkere block op cream bg. We geven
 *       een correcte token-fallback.
 *  10.  Tables overflow-x op mobile: huidige `overflow-x:auto` op
 *       wrapper maar geen visuele hint (geen fade, geen scroll
 *       indicator) → user weet niet dat-ie kan scrollen. We
 *       voegen edge-fade toe.
 *  11.  In-page links binnen legal content (mailto: GDPR articles,
 *       cross-page anchor jumps) gebruiken inline `color:var(--color-accent)`
 *       maar geen underline en geen hover-state → niet duidelijk
 *       klikbaar. We voegen subtle underline + hover toe.
 *  12.  Print stylesheet: legal-pagina's worden vaak geprint
 *       (Privacy + Terms voor lokale dossiers). De header/footer/
 *       trust-bar/nav-cart moeten weg, body-text moet zwart-op-wit
 *       met goede leading. Generic print rules ontbreken voor
 *       data-page="legal" family.
 *  13.  Section dividers ontbreken: tussen `<div>` blocks in een
 *       `.stack-lg` is alleen verticale ruimte — geen visuele
 *       breuk om secties te scheiden in lange legal flows.
 *  14.  `<strong>` tags in body-text-soft worden bijna onzichtbaar
 *       (text-soft is al low-contrast, strong-color erft dat).
 *       We forceren --color-text voor strong tags in legal lists.
 *  15.  Form (gdpr-rights.html submit form): inputs hebben inline
 *       styles maar geen focus-ring → keyboard nav onzichtbaar.
 *       :focus-visible ring met accent-glow toevoegen.
 *  16.  Imprint cards (5 talen) stapelen op mobile zonder visueel
 *       onderscheid welke taal-card aan staat. card__eyebrow
 *       krijgt accent-color + subtle accent-border-left bij hover.
 *  17.  TOC pills in privacy.html (article links) hebben geen
 *       state — current section niet gemarkeerd. We voegen een
 *       :target highlight toe voor de actieve sectie.
 *  18.  Reading progress: lange pages (>5000 woorden in Terms)
 *       hebben geen visuele "waar zit ik in dit document". We
 *       gebruiken een subtle accent left-rail per section-div
 *       die op :target oplicht.
 * ============================================================ */


/* ============================================================
 *  0 · SHARED — alle legal/policy pages krijgen deze base
 * ============================================================
 *  We bundelen de selectoren om duplicatie te voorkomen.
 *  Per-page overrides verder naar onder.
 * ============================================================ */

body[data-page="legal"],
body[data-page="privacy"],
body[data-page="terms"],
body[data-page="cookie-policy"],
body[data-page="cookie-audit"],
body[data-page="gdpr-rights"],
body[data-page="dmca"],
body[data-page="imprint"],
body[data-page="security-policy"],
body[data-page="security-acknowledgments"],
body[data-page="research-use"],
body[data-page="research-frame-guide"],
body[data-page="compliance-eu"],
body[data-page="compliance-shipping"],
body[data-page="compliance-calendar"] {
  /* Reading rhythm tokens — locally scoped, geen pollution. */
  --legal-line-height:      1.65;
  --legal-paragraph-gap:    18px;
  --legal-anchor-offset:    96px;   /* sticky-header clearance */
  --legal-list-item-gap:    8px;
  --legal-divider:          color-mix(in srgb, var(--color-border) 80%, transparent);
  --legal-rail-idle:        color-mix(in srgb, var(--color-border) 60%, transparent);
  --legal-rail-active:      var(--color-accent);
  --legal-zebra:            color-mix(in srgb, var(--color-surface-raised) 55%, transparent);
  --legal-pill-bg:          color-mix(in srgb, var(--color-accent-soft, rgba(224,27,27,.12)) 85%, transparent);
  --legal-pill-bg-muted:    color-mix(in srgb, var(--color-border) 25%, transparent);
}


/* ============================================================
 *  1 · LONG-FORM TYPOGRAPHY
 *  Issues fixed: 1, 2, 14
 * ============================================================
 *  De legal-pagina's gebruiken een `<div class="stack-lg" style="max-width:820px;">`
 *  als article-container. Elk topic is een `<div>` met een
 *  `<h2 class="section__title">` (te zwaar voor binnen-artikel
 *  hierarchie). We targeten alleen wanneer .section__title binnen
 *  .stack-lg zit, NIET de page-level H1 boven de breadcrumb.
 * ============================================================ */

body[data-page="legal"]      .stack-lg .section__title,
body[data-page="privacy"]    .stack-lg .section__title,
body[data-page="terms"]      .stack-lg .section__title,
body[data-page="cookie-policy"]  .stack-lg .section__title,
body[data-page="cookie-audit"]   .stack-lg .section__title,
body[data-page="gdpr-rights"]    .stack-lg .section__title,
body[data-page="dmca"]       .stack-lg .section__title,
body[data-page="imprint"]    .stack-lg .section__title,
body[data-page="security-policy"]      .stack-lg .section__title,
body[data-page="security-acknowledgments"] .stack-lg .section__title,
body[data-page="research-use"]   .stack-lg .section__title,
body[data-page="research-frame-guide"] .stack-lg .section__title,
body[data-page="compliance-eu"]      .stack-lg .section__title,
body[data-page="compliance-shipping"] .stack-lg .section__title,
body[data-page="compliance-calendar"] .stack-lg .section__title {
  /* Article-level H2: lighter than the page hero H1 */
  font-size: clamp(1.18rem, 2.6vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-weight: 600;
}

body[data-page="legal"]      .stack-lg h3,
body[data-page="privacy"]    .stack-lg h3,
body[data-page="terms"]      .stack-lg h3,
body[data-page="cookie-policy"]  .stack-lg h3,
body[data-page="cookie-audit"]   .stack-lg h3,
body[data-page="gdpr-rights"]    .stack-lg h3,
body[data-page="dmca"]       .stack-lg h3,
body[data-page="imprint"]    .stack-lg h3,
body[data-page="security-policy"] .stack-lg h3,
body[data-page="security-acknowledgments"] .stack-lg h3,
body[data-page="research-use"]   .stack-lg h3,
body[data-page="research-frame-guide"] .stack-lg h3,
body[data-page="compliance-eu"]  .stack-lg h3,
body[data-page="compliance-shipping"] .stack-lg h3,
body[data-page="compliance-calendar"] .stack-lg h3 {
  font-size: clamp(1.02rem, 2vw, 1.12rem);
  line-height: 1.35;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-text);
  font-weight: 600;
}

/* Body paragraphs: comfortable reading leading + spacing */
body[data-page="legal"]      .stack-lg .card__body-text,
body[data-page="privacy"]    .stack-lg .card__body-text,
body[data-page="terms"]      .stack-lg .card__body-text,
body[data-page="cookie-policy"]  .stack-lg .card__body-text,
body[data-page="cookie-audit"]   .stack-lg .card__body-text,
body[data-page="gdpr-rights"]    .stack-lg .card__body-text,
body[data-page="dmca"]       .stack-lg .card__body-text,
body[data-page="imprint"]    .stack-lg .card__body-text,
body[data-page="security-policy"]      .stack-lg .card__body-text,
body[data-page="security-acknowledgments"] .stack-lg .card__body-text,
body[data-page="research-use"]   .stack-lg .card__body-text,
body[data-page="research-frame-guide"] .stack-lg .card__body-text,
body[data-page="compliance-eu"]  .stack-lg .card__body-text,
body[data-page="compliance-shipping"] .stack-lg .card__body-text,
body[data-page="compliance-calendar"] .stack-lg .card__body-text {
  font-size: clamp(0.95rem, 2vw, 1rem);
  line-height: var(--legal-line-height);
  color: var(--color-text-soft);
}

/* Paragraph + paragraph spacing inside a section div */
body[data-page="legal"]      .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="privacy"]    .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="terms"]      .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="cookie-policy"]  .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="cookie-audit"]   .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="gdpr-rights"]    .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="dmca"]       .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="imprint"]    .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="security-policy"]      .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="security-acknowledgments"] .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="research-use"]   .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="research-frame-guide"] .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="compliance-eu"]  .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="compliance-shipping"] .stack-lg > div > .card__body-text + .card__body-text,
body[data-page="compliance-calendar"] .stack-lg > div > .card__body-text + .card__body-text {
  margin-top: var(--legal-paragraph-gap);
}

/* Strong tags inside soft body text need contrast bump (issue 14) */
body[data-page="legal"]      .stack-lg strong,
body[data-page="privacy"]    .stack-lg strong,
body[data-page="terms"]      .stack-lg strong,
body[data-page="cookie-policy"]  .stack-lg strong,
body[data-page="cookie-audit"]   .stack-lg strong,
body[data-page="gdpr-rights"]    .stack-lg strong,
body[data-page="dmca"]       .stack-lg strong,
body[data-page="imprint"]    .stack-lg strong,
body[data-page="security-policy"]      .stack-lg strong,
body[data-page="security-acknowledgments"] .stack-lg strong,
body[data-page="research-use"]   .stack-lg strong,
body[data-page="research-frame-guide"] .stack-lg strong,
body[data-page="compliance-eu"]  .stack-lg strong,
body[data-page="compliance-shipping"] .stack-lg strong,
body[data-page="compliance-calendar"] .stack-lg strong {
  color: var(--color-text);
  font-weight: 600;
}


/* ============================================================
 *  2 · LISTS — bullets, numbering, spacing
 *  Issues fixed: 3, 7
 * ============================================================ */

body[data-page="legal"]      .stack-lg ul,
body[data-page="privacy"]    .stack-lg ul,
body[data-page="terms"]      .stack-lg ul,
body[data-page="cookie-policy"]  .stack-lg ul,
body[data-page="cookie-audit"]   .stack-lg ul,
body[data-page="gdpr-rights"]    .stack-lg ul,
body[data-page="dmca"]       .stack-lg ul,
body[data-page="imprint"]    .stack-lg ul,
body[data-page="security-policy"]      .stack-lg ul,
body[data-page="security-acknowledgments"] .stack-lg ul,
body[data-page="research-use"]   .stack-lg ul,
body[data-page="research-frame-guide"] .stack-lg ul,
body[data-page="compliance-eu"]  .stack-lg ul,
body[data-page="compliance-shipping"] .stack-lg ul,
body[data-page="compliance-calendar"] .stack-lg ul,
body[data-page="legal"]      .stack-lg ol,
body[data-page="privacy"]    .stack-lg ol,
body[data-page="terms"]      .stack-lg ol,
body[data-page="cookie-policy"]  .stack-lg ol,
body[data-page="cookie-audit"]   .stack-lg ol,
body[data-page="gdpr-rights"]    .stack-lg ol,
body[data-page="dmca"]       .stack-lg ol,
body[data-page="imprint"]    .stack-lg ol,
body[data-page="security-policy"]      .stack-lg ol,
body[data-page="research-use"]   .stack-lg ol,
body[data-page="research-frame-guide"] .stack-lg ol,
body[data-page="compliance-eu"]  .stack-lg ol,
body[data-page="compliance-shipping"] .stack-lg ol,
body[data-page="compliance-calendar"] .stack-lg ol {
  /* Reset inline-style assumptions but keep the content */
  line-height: var(--legal-line-height);
  font-size: clamp(0.95rem, 2vw, 1rem);
  color: var(--color-text-soft);
  /* explicit list-style — many pages hide bullets accidentally */
  list-style-position: outside;
}

body[data-page="legal"]      .stack-lg ul,
body[data-page="privacy"]    .stack-lg ul,
body[data-page="terms"]      .stack-lg ul,
body[data-page="cookie-policy"]  .stack-lg ul,
body[data-page="cookie-audit"]   .stack-lg ul,
body[data-page="gdpr-rights"]    .stack-lg ul,
body[data-page="dmca"]       .stack-lg ul,
body[data-page="imprint"]    .stack-lg ul,
body[data-page="security-policy"]      .stack-lg ul,
body[data-page="security-acknowledgments"] .stack-lg ul,
body[data-page="research-use"]   .stack-lg ul,
body[data-page="research-frame-guide"] .stack-lg ul,
body[data-page="compliance-eu"]  .stack-lg ul,
body[data-page="compliance-shipping"] .stack-lg ul,
body[data-page="compliance-calendar"] .stack-lg ul {
  list-style-type: disc;
}

body[data-page="legal"]      .stack-lg ol,
body[data-page="privacy"]    .stack-lg ol,
body[data-page="terms"]      .stack-lg ol,
body[data-page="cookie-policy"]  .stack-lg ol,
body[data-page="cookie-audit"]   .stack-lg ol,
body[data-page="gdpr-rights"]    .stack-lg ol,
body[data-page="dmca"]       .stack-lg ol,
body[data-page="imprint"]    .stack-lg ol,
body[data-page="security-policy"]      .stack-lg ol,
body[data-page="research-use"]   .stack-lg ol,
body[data-page="research-frame-guide"] .stack-lg ol,
body[data-page="compliance-eu"]  .stack-lg ol,
body[data-page="compliance-shipping"] .stack-lg ol,
body[data-page="compliance-calendar"] .stack-lg ol {
  list-style-type: decimal;
}

body[data-page="legal"]      .stack-lg li,
body[data-page="privacy"]    .stack-lg li,
body[data-page="terms"]      .stack-lg li,
body[data-page="cookie-policy"]  .stack-lg li,
body[data-page="cookie-audit"]   .stack-lg li,
body[data-page="gdpr-rights"]    .stack-lg li,
body[data-page="dmca"]       .stack-lg li,
body[data-page="imprint"]    .stack-lg li,
body[data-page="security-policy"]      .stack-lg li,
body[data-page="security-acknowledgments"] .stack-lg li,
body[data-page="research-use"]   .stack-lg li,
body[data-page="research-frame-guide"] .stack-lg li,
body[data-page="compliance-eu"]  .stack-lg li,
body[data-page="compliance-shipping"] .stack-lg li,
body[data-page="compliance-calendar"] .stack-lg li {
  margin: 0;
  padding-left: 4px;
}

body[data-page="legal"]      .stack-lg li + li,
body[data-page="privacy"]    .stack-lg li + li,
body[data-page="terms"]      .stack-lg li + li,
body[data-page="cookie-policy"]  .stack-lg li + li,
body[data-page="cookie-audit"]   .stack-lg li + li,
body[data-page="gdpr-rights"]    .stack-lg li + li,
body[data-page="dmca"]       .stack-lg li + li,
body[data-page="imprint"]    .stack-lg li + li,
body[data-page="security-policy"]      .stack-lg li + li,
body[data-page="security-acknowledgments"] .stack-lg li + li,
body[data-page="research-use"]   .stack-lg li + li,
body[data-page="research-frame-guide"] .stack-lg li + li,
body[data-page="compliance-eu"]  .stack-lg li + li,
body[data-page="compliance-shipping"] .stack-lg li + li,
body[data-page="compliance-calendar"] .stack-lg li + li {
  margin-top: var(--legal-list-item-gap);
}

/* Bullet marker color — visible in both themes */
body[data-page="legal"]      .stack-lg ul li::marker,
body[data-page="privacy"]    .stack-lg ul li::marker,
body[data-page="terms"]      .stack-lg ul li::marker,
body[data-page="cookie-policy"]  .stack-lg ul li::marker,
body[data-page="cookie-audit"]   .stack-lg ul li::marker,
body[data-page="gdpr-rights"]    .stack-lg ul li::marker,
body[data-page="dmca"]       .stack-lg ul li::marker,
body[data-page="imprint"]    .stack-lg ul li::marker,
body[data-page="security-policy"]      .stack-lg ul li::marker,
body[data-page="security-acknowledgments"] .stack-lg ul li::marker,
body[data-page="research-use"]   .stack-lg ul li::marker,
body[data-page="research-frame-guide"] .stack-lg ul li::marker,
body[data-page="compliance-eu"]  .stack-lg ul li::marker,
body[data-page="compliance-shipping"] .stack-lg ul li::marker,
body[data-page="compliance-calendar"] .stack-lg ul li::marker {
  color: var(--color-accent);
}

body[data-page="legal"]      .stack-lg ol li::marker,
body[data-page="privacy"]    .stack-lg ol li::marker,
body[data-page="terms"]      .stack-lg ol li::marker,
body[data-page="cookie-policy"]  .stack-lg ol li::marker,
body[data-page="cookie-audit"]   .stack-lg ol li::marker,
body[data-page="gdpr-rights"]    .stack-lg ol li::marker,
body[data-page="dmca"]       .stack-lg ol li::marker,
body[data-page="imprint"]    .stack-lg ol li::marker,
body[data-page="security-policy"]      .stack-lg ol li::marker,
body[data-page="research-use"]   .stack-lg ol li::marker,
body[data-page="research-frame-guide"] .stack-lg ol li::marker,
body[data-page="compliance-eu"]  .stack-lg ol li::marker,
body[data-page="compliance-shipping"] .stack-lg ol li::marker,
body[data-page="compliance-calendar"] .stack-lg ol li::marker {
  color: var(--color-text-muted);
  font-weight: 600;
}


/* ============================================================
 *  3 · ANCHOR / SCROLL-MARGIN — sticky header clearance
 *  Issues fixed: 4
 * ============================================================
 *  Click op in-page anchor (#right-of-access, #dpo, etc.)
 *  scrollt het target onder de sticky header. We zetten een
 *  scroll-margin-top zodat het target altijd zichtbaar
 *  uitkomt onder de header.
 * ============================================================ */

body[data-page="legal"]      .stack-lg > div[id],
body[data-page="privacy"]    .stack-lg > div[id],
body[data-page="terms"]      .stack-lg > div[id],
body[data-page="cookie-policy"]  .stack-lg > div[id],
body[data-page="cookie-audit"]   .stack-lg > div[id],
body[data-page="gdpr-rights"]    .stack-lg > div[id],
body[data-page="dmca"]       .stack-lg > div[id],
body[data-page="imprint"]    .stack-lg > div[id],
body[data-page="security-policy"]      .stack-lg > div[id],
body[data-page="security-acknowledgments"] .stack-lg > div[id],
body[data-page="research-use"]   .stack-lg > div[id],
body[data-page="research-frame-guide"] .stack-lg > div[id],
body[data-page="compliance-eu"]  .stack-lg > div[id],
body[data-page="compliance-shipping"] .stack-lg > div[id],
body[data-page="compliance-calendar"] .stack-lg > div[id] {
  scroll-margin-top: var(--legal-anchor-offset);
}


/* ============================================================
 *  4 · SECTION DIVIDERS + TARGET HIGHLIGHT
 *  Issues fixed: 13, 17, 18
 * ============================================================
 *  Een lange legal page met 25-30 secties heeft geen visuele
 *  breakpoints. We voegen een hairline-divider toe boven elke
 *  section-div (behalve eerste) + een subtle accent left-rail
 *  die oplicht wanneer de sectie :target is (deep-link).
 * ============================================================ */

body[data-page="legal"]      .stack-lg > div + div,
body[data-page="privacy"]    .stack-lg > div + div,
body[data-page="terms"]      .stack-lg > div + div,
body[data-page="cookie-policy"]  .stack-lg > div + div,
body[data-page="cookie-audit"]   .stack-lg > div + div,
body[data-page="gdpr-rights"]    .stack-lg > div + div,
body[data-page="dmca"]       .stack-lg > div + div,
body[data-page="security-policy"]      .stack-lg > div + div,
body[data-page="security-acknowledgments"] .stack-lg > div + div,
body[data-page="research-use"]   .stack-lg > div + div,
body[data-page="research-frame-guide"] .stack-lg > div + div,
body[data-page="compliance-eu"]  .stack-lg > div + div,
body[data-page="compliance-shipping"] .stack-lg > div + div,
body[data-page="compliance-calendar"] .stack-lg > div + div {
  position: relative;
  padding-top: var(--space-5);
}

body[data-page="legal"]      .stack-lg > div + div::before,
body[data-page="privacy"]    .stack-lg > div + div::before,
body[data-page="terms"]      .stack-lg > div + div::before,
body[data-page="cookie-policy"]  .stack-lg > div + div::before,
body[data-page="cookie-audit"]   .stack-lg > div + div::before,
body[data-page="gdpr-rights"]    .stack-lg > div + div::before,
body[data-page="dmca"]       .stack-lg > div + div::before,
body[data-page="security-policy"]      .stack-lg > div + div::before,
body[data-page="security-acknowledgments"] .stack-lg > div + div::before,
body[data-page="research-use"]   .stack-lg > div + div::before,
body[data-page="research-frame-guide"] .stack-lg > div + div::before,
body[data-page="compliance-eu"]  .stack-lg > div + div::before,
body[data-page="compliance-shipping"] .stack-lg > div + div::before,
body[data-page="compliance-calendar"] .stack-lg > div + div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--legal-divider);
  pointer-events: none;
}

/* Target highlight — :target krijgt een accent left-rail.
   Smooth fade-in zodat het niet hard knippert bij anchor-jump. */
body[data-page="legal"]      .stack-lg > div[id]:target,
body[data-page="privacy"]    .stack-lg > div[id]:target,
body[data-page="terms"]      .stack-lg > div[id]:target,
body[data-page="cookie-policy"]  .stack-lg > div[id]:target,
body[data-page="cookie-audit"]   .stack-lg > div[id]:target,
body[data-page="gdpr-rights"]    .stack-lg > div[id]:target,
body[data-page="dmca"]       .stack-lg > div[id]:target,
body[data-page="imprint"]    .stack-lg > div[id]:target,
body[data-page="security-policy"]      .stack-lg > div[id]:target,
body[data-page="security-acknowledgments"] .stack-lg > div[id]:target,
body[data-page="research-use"]   .stack-lg > div[id]:target,
body[data-page="research-frame-guide"] .stack-lg > div[id]:target,
body[data-page="compliance-eu"]  .stack-lg > div[id]:target,
body[data-page="compliance-shipping"] .stack-lg > div[id]:target,
body[data-page="compliance-calendar"] .stack-lg > div[id]:target {
  position: relative;
  padding-left: var(--space-4);
  border-left: 2px solid var(--legal-rail-active);
  margin-left: -2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-accent) 6%, transparent),
    transparent 40%
  );
  border-radius: 2px;
  transition: background-color 320ms ease;
}


/* ============================================================
 *  5 · INLINE LINKS — underline + hover affordance
 *  Issues fixed: 11
 * ============================================================
 *  Veel links hebben `style="color:var(--color-accent);"` inline,
 *  geen underline en geen hover-state. We injecteren via
 *  attribute-selector + general anchor selector binnen .stack-lg.
 * ============================================================ */

body[data-page="legal"]      .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="privacy"]    .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="terms"]      .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="cookie-policy"]  .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="cookie-audit"]   .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="gdpr-rights"]    .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="dmca"]       .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="imprint"]    .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="security-policy"]      .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="security-acknowledgments"] .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="research-use"]   .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="research-frame-guide"] .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="compliance-eu"]  .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="compliance-shipping"] .stack-lg a:not(.btn):not(.card):not(.card--interactive),
body[data-page="compliance-calendar"] .stack-lg a:not(.btn):not(.card):not(.card--interactive) {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 160ms ease, color 160ms ease;
}

body[data-page="legal"]      .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="privacy"]    .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="terms"]      .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="cookie-policy"]  .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="cookie-audit"]   .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="gdpr-rights"]    .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="dmca"]       .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="imprint"]    .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="security-policy"]      .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="security-acknowledgments"] .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="research-use"]   .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="research-frame-guide"] .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="compliance-eu"]  .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="compliance-shipping"] .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover,
body[data-page="compliance-calendar"] .stack-lg a:not(.btn):not(.card):not(.card--interactive):hover {
  color: var(--color-accent-hover, var(--color-accent));
  text-decoration-color: var(--color-accent);
}

/* Focus-visible — keyboard nav affordance */
body[data-page="legal"]      .stack-lg a:focus-visible,
body[data-page="privacy"]    .stack-lg a:focus-visible,
body[data-page="terms"]      .stack-lg a:focus-visible,
body[data-page="cookie-policy"]  .stack-lg a:focus-visible,
body[data-page="cookie-audit"]   .stack-lg a:focus-visible,
body[data-page="gdpr-rights"]    .stack-lg a:focus-visible,
body[data-page="dmca"]       .stack-lg a:focus-visible,
body[data-page="imprint"]    .stack-lg a:focus-visible,
body[data-page="security-policy"]      .stack-lg a:focus-visible,
body[data-page="security-acknowledgments"] .stack-lg a:focus-visible,
body[data-page="research-use"]   .stack-lg a:focus-visible,
body[data-page="research-frame-guide"] .stack-lg a:focus-visible,
body[data-page="compliance-eu"]  .stack-lg a:focus-visible,
body[data-page="compliance-shipping"] .stack-lg a:focus-visible,
body[data-page="compliance-calendar"] .stack-lg a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================
 *  6 · INLINE CODE / PMID PILLS
 *  Issues fixed: 6
 * ============================================================
 *  <code>togopeptide.com</code>, <code>togo:consent</code> etc.
 *  krijgen een pill-look — subtiele bg, mono font, license-plate
 *  aesthetic.
 * ============================================================ */

body[data-page="legal"]      .stack-lg :not(pre) > code,
body[data-page="privacy"]    .stack-lg :not(pre) > code,
body[data-page="terms"]      .stack-lg :not(pre) > code,
body[data-page="cookie-policy"]  .stack-lg :not(pre) > code,
body[data-page="cookie-audit"]   .stack-lg :not(pre) > code,
body[data-page="gdpr-rights"]    .stack-lg :not(pre) > code,
body[data-page="dmca"]       .stack-lg :not(pre) > code,
body[data-page="imprint"]    .stack-lg :not(pre) > code,
body[data-page="security-policy"]      .stack-lg :not(pre) > code,
body[data-page="security-acknowledgments"] .stack-lg :not(pre) > code,
body[data-page="research-use"]   .stack-lg :not(pre) > code,
body[data-page="research-frame-guide"] .stack-lg :not(pre) > code,
body[data-page="compliance-eu"]  .stack-lg :not(pre) > code,
body[data-page="compliance-shipping"] .stack-lg :not(pre) > code,
body[data-page="compliance-calendar"] .stack-lg :not(pre) > code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.88em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--legal-pill-bg-muted);
  border: 1px solid var(--legal-divider);
  color: var(--color-text);
  word-break: break-word;
}

/* Citation refs e.g. <em>article 6(1)(b)</em> — give them a
   gentle accent so legal-citation chains read as a chain */
body[data-page="legal"]      .stack-lg li > em,
body[data-page="privacy"]    .stack-lg li > em,
body[data-page="terms"]      .stack-lg li > em,
body[data-page="cookie-policy"]  .stack-lg li > em,
body[data-page="cookie-audit"]   .stack-lg li > em,
body[data-page="gdpr-rights"]    .stack-lg li > em,
body[data-page="dmca"]       .stack-lg li > em,
body[data-page="research-use"]   .stack-lg li > em,
body[data-page="research-frame-guide"] .stack-lg li > em,
body[data-page="compliance-eu"]  .stack-lg li > em,
body[data-page="compliance-shipping"] .stack-lg li > em,
body[data-page="compliance-calendar"] .stack-lg li > em {
  color: var(--color-text-muted);
  font-style: italic;
}


/* ============================================================
 *  7 · TABLES — cookie-audit + others
 *  Issues fixed: 5, 10
 * ============================================================
 *  Tables hebben inline `style="width:100%;border-collapse:..."`.
 *  We targeten ze waar ze in een .stack-lg leven en voegen
 *  zebra-stripes + hover + sticky-thead + edge-fade toe.
 * ============================================================ */

body[data-page="cookie-audit"] .stack-lg table,
body[data-page="privacy"]      .stack-lg table,
body[data-page="security-policy"] .stack-lg table,
body[data-page="terms"]        .stack-lg table,
body[data-page="cookie-policy"] .stack-lg table,
body[data-page="dmca"]         .stack-lg table,
body[data-page="compliance-eu"] .stack-lg table,
body[data-page="compliance-shipping"] .stack-lg table,
body[data-page="compliance-calendar"] .stack-lg table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.5;
}

body[data-page="cookie-audit"] .stack-lg thead tr,
body[data-page="privacy"]      .stack-lg thead tr,
body[data-page="security-policy"] .stack-lg thead tr,
body[data-page="terms"]        .stack-lg thead tr,
body[data-page="cookie-policy"] .stack-lg thead tr,
body[data-page="dmca"]         .stack-lg thead tr,
body[data-page="compliance-eu"] .stack-lg thead tr,
body[data-page="compliance-shipping"] .stack-lg thead tr,
body[data-page="compliance-calendar"] .stack-lg thead tr {
  background: color-mix(in srgb, var(--color-surface-raised) 80%, transparent);
}

body[data-page="cookie-audit"] .stack-lg thead th,
body[data-page="privacy"]      .stack-lg thead th,
body[data-page="security-policy"] .stack-lg thead th,
body[data-page="terms"]        .stack-lg thead th,
body[data-page="cookie-policy"] .stack-lg thead th,
body[data-page="dmca"]         .stack-lg thead th,
body[data-page="compliance-eu"] .stack-lg thead th,
body[data-page="compliance-shipping"] .stack-lg thead th,
body[data-page="compliance-calendar"] .stack-lg thead th {
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  font-size: 0.86rem;
  text-transform: uppercase;
  vertical-align: bottom;
  position: sticky;
  top: 0;
  /* sticky thead inside the overflow-x scrolling wrapper */
  z-index: 1;
}

body[data-page="cookie-audit"] .stack-lg tbody tr:nth-child(even),
body[data-page="privacy"]      .stack-lg tbody tr:nth-child(even),
body[data-page="security-policy"] .stack-lg tbody tr:nth-child(even),
body[data-page="terms"]        .stack-lg tbody tr:nth-child(even),
body[data-page="cookie-policy"] .stack-lg tbody tr:nth-child(even),
body[data-page="dmca"]         .stack-lg tbody tr:nth-child(even),
body[data-page="compliance-eu"] .stack-lg tbody tr:nth-child(even),
body[data-page="compliance-shipping"] .stack-lg tbody tr:nth-child(even),
body[data-page="compliance-calendar"] .stack-lg tbody tr:nth-child(even) {
  background: var(--legal-zebra);
}

body[data-page="cookie-audit"] .stack-lg tbody tr:hover,
body[data-page="privacy"]      .stack-lg tbody tr:hover,
body[data-page="security-policy"] .stack-lg tbody tr:hover,
body[data-page="terms"]        .stack-lg tbody tr:hover,
body[data-page="cookie-policy"] .stack-lg tbody tr:hover,
body[data-page="dmca"]         .stack-lg tbody tr:hover,
body[data-page="compliance-eu"] .stack-lg tbody tr:hover,
body[data-page="compliance-shipping"] .stack-lg tbody tr:hover,
body[data-page="compliance-calendar"] .stack-lg tbody tr:hover {
  background: color-mix(in srgb, var(--color-accent-soft, rgba(224,27,27,.12)) 35%, transparent);
  transition: background-color 140ms ease;
}

body[data-page="cookie-audit"] .stack-lg tbody td,
body[data-page="privacy"]      .stack-lg tbody td,
body[data-page="security-policy"] .stack-lg tbody td,
body[data-page="terms"]        .stack-lg tbody td,
body[data-page="cookie-policy"] .stack-lg tbody td,
body[data-page="dmca"]         .stack-lg tbody td,
body[data-page="compliance-eu"] .stack-lg tbody td,
body[data-page="compliance-shipping"] .stack-lg tbody td,
body[data-page="compliance-calendar"] .stack-lg tbody td {
  color: var(--color-text-soft);
  vertical-align: top;
  border-bottom: 1px solid var(--legal-divider);
}

/* Edge fade hint on horizontally scrollable table-wrapper card */
body[data-page="cookie-audit"] .stack-lg .card:has(> table) {
  position: relative;
}

body[data-page="cookie-audit"] .stack-lg .card:has(> table)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-surface) 65%, transparent)
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

/* Show fade only when overflow exists. We can't detect that
   without JS, but we hide the fade on wide viewports where the
   table fits naturally. */
@media (max-width: 900px) {
  body[data-page="cookie-audit"] .stack-lg .card:has(> table)::after {
    opacity: 1;
  }
}


/* ============================================================
 *  8 · <pre> BLOCKS — DMCA + Security-Policy fallback
 *  Issues fixed: 9
 * ============================================================
 *  pre uses inline `background:var(--color-surface-alt)` which
 *  does not exist as a token → resolves to initial → invisible
 *  block bg on light theme. We override with a valid token.
 * ============================================================ */

body[data-page="dmca"]            .stack-lg pre,
body[data-page="security-policy"] .stack-lg pre,
body[data-page="research-use"]    .stack-lg pre,
body[data-page="research-frame-guide"] .stack-lg pre,
body[data-page="privacy"]         .stack-lg pre,
body[data-page="terms"]           .stack-lg pre {
  background: var(--color-surface-raised, var(--color-surface));
  color: var(--color-text-soft);
  border: 1px solid var(--legal-divider);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4);
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
}


/* ============================================================
 *  9 · MOBILE CONTAINER — reading-width comfort
 *  Issues fixed: 8
 * ============================================================
 *  .stack-lg krijgt op desktop max-width:820px inline, maar
 *  op mobile heeft de .container al een padding-inline van 16px
 *  (zie shell.css). Bij sommige paragraphs gaat dat verloren.
 * ============================================================ */

@media (max-width: 640px) {
  body[data-page="legal"]      .stack-lg,
  body[data-page="privacy"]    .stack-lg,
  body[data-page="terms"]      .stack-lg,
  body[data-page="cookie-policy"]  .stack-lg,
  body[data-page="cookie-audit"]   .stack-lg,
  body[data-page="gdpr-rights"]    .stack-lg,
  body[data-page="dmca"]       .stack-lg,
  body[data-page="imprint"]    .stack-lg,
  body[data-page="security-policy"]      .stack-lg,
  body[data-page="security-acknowledgments"] .stack-lg,
  body[data-page="research-use"]   .stack-lg,
  body[data-page="research-frame-guide"] .stack-lg,
  body[data-page="compliance-eu"]  .stack-lg,
  body[data-page="compliance-shipping"] .stack-lg,
  body[data-page="compliance-calendar"] .stack-lg {
    max-width: 100% !important;
  }

  /* Tighter spacing rhythm on mobile */
  body[data-page="legal"]      .stack-lg > * + *,
  body[data-page="privacy"]    .stack-lg > * + *,
  body[data-page="terms"]      .stack-lg > * + *,
  body[data-page="cookie-policy"]  .stack-lg > * + *,
  body[data-page="cookie-audit"]   .stack-lg > * + *,
  body[data-page="gdpr-rights"]    .stack-lg > * + *,
  body[data-page="dmca"]       .stack-lg > * + *,
  body[data-page="imprint"]    .stack-lg > * + *,
  body[data-page="security-policy"]      .stack-lg > * + *,
  body[data-page="research-use"]   .stack-lg > * + *,
  body[data-page="research-frame-guide"] .stack-lg > * + *,
  body[data-page="compliance-eu"]  .stack-lg > * + *,
  body[data-page="compliance-shipping"] .stack-lg > * + *,
  body[data-page="compliance-calendar"] .stack-lg > * + * {
    margin-top: var(--space-5);
  }
}


/* ============================================================
 *  10 · LIGHT MODE — contrast for small grey legal text
 *  Issues fixed: 7
 * ============================================================
 *  In light mode op cream paper bg (#F6F4EF) heeft inline
 *  `color:var(--color-text-soft)` op kleine lijsten (0.88rem
 *  footnotes, 0.92rem table cells) maar net het 4.5:1 minimum.
 *  We forceren een diepere variant voor list-items en table
 *  cells op pages in light mode.
 * ============================================================ */

html[data-theme="light"] body[data-page="legal"]      .stack-lg li,
html[data-theme="light"] body[data-page="privacy"]    .stack-lg li,
html[data-theme="light"] body[data-page="terms"]      .stack-lg li,
html[data-theme="light"] body[data-page="cookie-policy"]  .stack-lg li,
html[data-theme="light"] body[data-page="cookie-audit"]   .stack-lg li,
html[data-theme="light"] body[data-page="gdpr-rights"]    .stack-lg li,
html[data-theme="light"] body[data-page="dmca"]       .stack-lg li,
html[data-theme="light"] body[data-page="imprint"]    .stack-lg li,
html[data-theme="light"] body[data-page="security-policy"]      .stack-lg li,
html[data-theme="light"] body[data-page="security-acknowledgments"] .stack-lg li,
html[data-theme="light"] body[data-page="research-use"]   .stack-lg li,
html[data-theme="light"] body[data-page="research-frame-guide"] .stack-lg li,
html[data-theme="light"] body[data-page="compliance-eu"]  .stack-lg li,
html[data-theme="light"] body[data-page="compliance-shipping"] .stack-lg li,
html[data-theme="light"] body[data-page="compliance-calendar"] .stack-lg li,
html[data-theme="light"] body[data-page="cookie-audit"] .stack-lg tbody td,
html[data-theme="light"] body[data-page="privacy"]      .stack-lg tbody td,
html[data-theme="light"] body[data-page="security-policy"] .stack-lg tbody td,
html[data-theme="light"] body[data-page="terms"]        .stack-lg tbody td,
html[data-theme="light"] body[data-page="cookie-policy"] .stack-lg tbody td,
html[data-theme="light"] body[data-page="dmca"]         .stack-lg tbody td,
html[data-theme="light"] body[data-page="compliance-eu"] .stack-lg tbody td,
html[data-theme="light"] body[data-page="compliance-shipping"] .stack-lg tbody td,
html[data-theme="light"] body[data-page="compliance-calendar"] .stack-lg tbody td {
  /* Force a deeper text shade — 7:1 contrast on paper bg */
  color: #2a2a30;
}

/* Light mode: pre-blocks should use paper-white, not surface */
html[data-theme="light"] body[data-page="dmca"]            .stack-lg pre,
html[data-theme="light"] body[data-page="security-policy"] .stack-lg pre,
html[data-theme="light"] body[data-page="research-use"]    .stack-lg pre,
html[data-theme="light"] body[data-page="research-frame-guide"] .stack-lg pre,
html[data-theme="light"] body[data-page="privacy"]         .stack-lg pre,
html[data-theme="light"] body[data-page="terms"]           .stack-lg pre {
  background: #FFFFFF;
  color: #2a2a30;
  border-color: rgba(10, 10, 12, 0.12);
}

/* Light mode: inline-code pill needs deeper contrast */
html[data-theme="light"] body[data-page="legal"]      .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="privacy"]    .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="terms"]      .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="cookie-policy"]  .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="cookie-audit"]   .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="gdpr-rights"]    .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="dmca"]       .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="imprint"]    .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="security-policy"]      .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="research-use"]   .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="research-frame-guide"] .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="compliance-eu"]  .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="compliance-shipping"] .stack-lg :not(pre) > code,
html[data-theme="light"] body[data-page="compliance-calendar"] .stack-lg :not(pre) > code {
  background: rgba(10, 10, 12, 0.045);
  border-color: rgba(10, 10, 12, 0.12);
  color: #161616;
}


/* ============================================================
 *  11 · GDPR FORM (gdpr-rights.html) — focus rings
 *  Issues fixed: 15
 * ============================================================ */

body[data-page="gdpr-rights"] #gdpr-form input:focus-visible,
body[data-page="gdpr-rights"] #gdpr-form select:focus-visible,
body[data-page="gdpr-rights"] #gdpr-form textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

body[data-page="gdpr-rights"] #gdpr-form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Submit button hover lift (very subtle) */
body[data-page="gdpr-rights"] #gdpr-form button[type="submit"] {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

body[data-page="gdpr-rights"] #gdpr-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 22%, transparent);
}


/* ============================================================
 *  12 · IMPRINT CARDS — multi-language affordance
 *  Issues fixed: 16
 * ============================================================ */

body[data-page="imprint"] .stack-lg > .card {
  border-left: 3px solid transparent;
  transition: border-left-color 180ms ease, transform 180ms ease,
              box-shadow 180ms ease;
}

body[data-page="imprint"] .stack-lg > .card:hover {
  border-left-color: var(--color-accent);
  transform: translateX(2px);
}

body[data-page="imprint"] .stack-lg > .card .card__eyebrow {
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.06em;
}


/* ============================================================
 *  13 · SECURITY-ACKNOWLEDGMENTS — recognition list polish
 * ============================================================
 *  Soft empty-state styling for "list currently empty" cases.
 * ============================================================ */

body[data-page="security-acknowledgments"] .stack-lg li > em,
body[data-page="security-policy"] .stack-lg li > em {
  display: inline-block;
  padding: 2px 8px;
  background: var(--legal-pill-bg-muted);
  border: 1px dashed var(--legal-divider);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-style: italic;
}


/* ============================================================
 *  14 · MOTION — respect user preference
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body[data-page="legal"]      .stack-lg *,
  body[data-page="privacy"]    .stack-lg *,
  body[data-page="terms"]      .stack-lg *,
  body[data-page="cookie-policy"]  .stack-lg *,
  body[data-page="cookie-audit"]   .stack-lg *,
  body[data-page="gdpr-rights"]    .stack-lg *,
  body[data-page="dmca"]       .stack-lg *,
  body[data-page="imprint"]    .stack-lg *,
  body[data-page="security-policy"]      .stack-lg *,
  body[data-page="security-acknowledgments"] .stack-lg *,
  body[data-page="research-use"]   .stack-lg *,
  body[data-page="research-frame-guide"] .stack-lg *,
  body[data-page="compliance-eu"]  .stack-lg *,
  body[data-page="compliance-shipping"] .stack-lg *,
  body[data-page="compliance-calendar"] .stack-lg * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ============================================================
 *  15 · PRINT STYLESHEET — legal & policy pages
 *  Issues fixed: 12
 * ============================================================
 *  Users print Privacy / Terms / GDPR / DMCA / Imprint for
 *  records. We strip chrome (header, footer, trust-bar, nav,
 *  cart, banners) and switch to a print-friendly typography.
 * ============================================================ */

@media print {
  body[data-page="legal"],
  body[data-page="privacy"],
  body[data-page="terms"],
  body[data-page="cookie-policy"],
  body[data-page="cookie-audit"],
  body[data-page="gdpr-rights"],
  body[data-page="dmca"],
  body[data-page="imprint"],
  body[data-page="security-policy"],
  body[data-page="security-acknowledgments"],
  body[data-page="research-use"],
  body[data-page="research-frame-guide"],
  body[data-page="compliance-eu"],
  body[data-page="compliance-shipping"],
  body[data-page="compliance-calendar"] {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 11pt;
    line-height: 1.55;
  }

  /* Strip site chrome */
  body[data-page="legal"]      .site-header,
  body[data-page="privacy"]    .site-header,
  body[data-page="terms"]      .site-header,
  body[data-page="cookie-policy"]  .site-header,
  body[data-page="cookie-audit"]   .site-header,
  body[data-page="gdpr-rights"]    .site-header,
  body[data-page="dmca"]       .site-header,
  body[data-page="imprint"]    .site-header,
  body[data-page="security-policy"]      .site-header,
  body[data-page="security-acknowledgments"] .site-header,
  body[data-page="research-use"]   .site-header,
  body[data-page="research-frame-guide"] .site-header,
  body[data-page="compliance-eu"]  .site-header,
  body[data-page="compliance-shipping"] .site-header,
  body[data-page="compliance-calendar"] .site-header,
  body[data-page="legal"]      .site-footer,
  body[data-page="privacy"]    .site-footer,
  body[data-page="terms"]      .site-footer,
  body[data-page="cookie-policy"]  .site-footer,
  body[data-page="cookie-audit"]   .site-footer,
  body[data-page="gdpr-rights"]    .site-footer,
  body[data-page="dmca"]       .site-footer,
  body[data-page="imprint"]    .site-footer,
  body[data-page="security-policy"]      .site-footer,
  body[data-page="security-acknowledgments"] .site-footer,
  body[data-page="research-use"]   .site-footer,
  body[data-page="research-frame-guide"] .site-footer,
  body[data-page="compliance-eu"]  .site-footer,
  body[data-page="compliance-shipping"] .site-footer,
  body[data-page="compliance-calendar"] .site-footer,
  body[data-page="legal"]      .trust-bar,
  body[data-page="privacy"]    .trust-bar,
  body[data-page="terms"]      .trust-bar,
  body[data-page="cookie-policy"]  .trust-bar,
  body[data-page="cookie-audit"]   .trust-bar,
  body[data-page="gdpr-rights"]    .trust-bar,
  body[data-page="dmca"]       .trust-bar,
  body[data-page="imprint"]    .trust-bar,
  body[data-page="security-policy"]      .trust-bar,
  body[data-page="security-acknowledgments"] .trust-bar,
  body[data-page="research-use"]   .trust-bar,
  body[data-page="research-frame-guide"] .trust-bar,
  body[data-page="compliance-eu"]  .trust-bar,
  body[data-page="compliance-shipping"] .trust-bar,
  body[data-page="compliance-calendar"] .trust-bar,
  body[data-page="legal"]      .breadcrumb,
  body[data-page="privacy"]    .breadcrumb,
  body[data-page="terms"]      .breadcrumb,
  body[data-page="cookie-policy"]  .breadcrumb,
  body[data-page="cookie-audit"]   .breadcrumb,
  body[data-page="gdpr-rights"]    .breadcrumb,
  body[data-page="dmca"]       .breadcrumb,
  body[data-page="imprint"]    .breadcrumb,
  body[data-page="security-policy"]      .breadcrumb,
  body[data-page="security-acknowledgments"] .breadcrumb,
  body[data-page="research-use"]   .breadcrumb,
  body[data-page="research-frame-guide"] .breadcrumb,
  body[data-page="compliance-eu"]  .breadcrumb,
  body[data-page="compliance-shipping"] .breadcrumb,
  body[data-page="compliance-calendar"] .breadcrumb,
  body[data-page="legal"]      .skip-link,
  body[data-page="privacy"]    .skip-link,
  body[data-page="terms"]      .skip-link,
  body[data-page="cookie-policy"]  .skip-link,
  body[data-page="cookie-audit"]   .skip-link,
  body[data-page="gdpr-rights"]    .skip-link,
  body[data-page="dmca"]       .skip-link,
  body[data-page="imprint"]    .skip-link,
  body[data-page="security-policy"]      .skip-link,
  body[data-page="research-use"]   .skip-link,
  body[data-page="research-frame-guide"] .skip-link,
  body[data-page="compliance-eu"]  .skip-link,
  body[data-page="compliance-shipping"] .skip-link,
  body[data-page="compliance-calendar"] .skip-link {
    display: none !important;
  }

  /* Make sure links keep URLs printed */
  body[data-page="legal"]      .stack-lg a[href^="http"]::after,
  body[data-page="privacy"]    .stack-lg a[href^="http"]::after,
  body[data-page="terms"]      .stack-lg a[href^="http"]::after,
  body[data-page="cookie-policy"]  .stack-lg a[href^="http"]::after,
  body[data-page="gdpr-rights"]    .stack-lg a[href^="http"]::after,
  body[data-page="dmca"]       .stack-lg a[href^="http"]::after,
  body[data-page="imprint"]    .stack-lg a[href^="http"]::after,
  body[data-page="security-policy"]      .stack-lg a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.82em;
    color: #444;
    word-break: break-all;
  }

  /* Headings stay together with first paragraph */
  body[data-page="legal"]      .stack-lg .section__title,
  body[data-page="privacy"]    .stack-lg .section__title,
  body[data-page="terms"]      .stack-lg .section__title,
  body[data-page="cookie-policy"]  .stack-lg .section__title,
  body[data-page="cookie-audit"]   .stack-lg .section__title,
  body[data-page="gdpr-rights"]    .stack-lg .section__title,
  body[data-page="dmca"]       .stack-lg .section__title,
  body[data-page="imprint"]    .stack-lg .section__title,
  body[data-page="security-policy"]      .stack-lg .section__title,
  body[data-page="security-acknowledgments"] .stack-lg .section__title,
  body[data-page="research-use"]   .stack-lg .section__title,
  body[data-page="research-frame-guide"] .stack-lg .section__title,
  body[data-page="compliance-eu"]  .stack-lg .section__title,
  body[data-page="compliance-shipping"] .stack-lg .section__title,
  body[data-page="compliance-calendar"] .stack-lg .section__title {
    page-break-after: avoid;
    color: #000 !important;
  }

  body[data-page="legal"]      .stack-lg > div + div::before,
  body[data-page="privacy"]    .stack-lg > div + div::before,
  body[data-page="terms"]      .stack-lg > div + div::before,
  body[data-page="cookie-policy"]  .stack-lg > div + div::before,
  body[data-page="cookie-audit"]   .stack-lg > div + div::before,
  body[data-page="gdpr-rights"]    .stack-lg > div + div::before,
  body[data-page="dmca"]       .stack-lg > div + div::before,
  body[data-page="imprint"]    .stack-lg > div + div::before,
  body[data-page="security-policy"]      .stack-lg > div + div::before,
  body[data-page="research-use"]   .stack-lg > div + div::before,
  body[data-page="research-frame-guide"] .stack-lg > div + div::before,
  body[data-page="compliance-eu"]  .stack-lg > div + div::before,
  body[data-page="compliance-shipping"] .stack-lg > div + div::before,
  body[data-page="compliance-calendar"] .stack-lg > div + div::before {
    background: #BBB;
  }

  body[data-page="legal"]      .stack-lg,
  body[data-page="privacy"]    .stack-lg,
  body[data-page="terms"]      .stack-lg,
  body[data-page="cookie-policy"]  .stack-lg,
  body[data-page="cookie-audit"]   .stack-lg,
  body[data-page="gdpr-rights"]    .stack-lg,
  body[data-page="dmca"]       .stack-lg,
  body[data-page="imprint"]    .stack-lg,
  body[data-page="security-policy"]      .stack-lg,
  body[data-page="research-use"]   .stack-lg,
  body[data-page="research-frame-guide"] .stack-lg,
  body[data-page="compliance-eu"]  .stack-lg,
  body[data-page="compliance-shipping"] .stack-lg,
  body[data-page="compliance-calendar"] .stack-lg {
    max-width: 100% !important;
  }

  @page {
    margin: 18mm 16mm 22mm 16mm;
  }
}