/* ==========================================================================
   DODO Cookie Bar — v1.0
   Drop-in styles. No dependencies. All selectors are namespaced .dodo-cc*.
   Fonts are inherited from the host page (Poppins + IBM Plex Mono expected);
   the stack below only provides a safe fallback.

   LOCAL DEVIATIONS FROM THE HANDOFF (full list in dodo-cookie-bar.js). In
   this file: the container ignores pointer events (audit A11Y-05), the pill
   is a round icon (client, 9. 9. 2026), the compact first layer in a window
   lower than 560px (client, 27. 10. 2026, R14; audit A11Y-04), the
   invisible 44px hit areas of the switches, the back arrow and the pill on
   a coarse pointer (30. 10. 2026, K-04; nothing drawn changes), the two
   html[data-dodo-cc-open] rules (audit A11Y-04), the bar hidden while the
   host's mobile menu is open (30. 10. 2026, audit A11Y-04), and the
   "print" block at the very end (16. 10. 2026, audit UX-07), which hides
   the bar, its preferences card and the re-entry pill on paper. The print block is
   print-only; the screen layout, the buttons and the pill are unchanged
   (D05 C, D60 point 3). The card itself looks as delivered in every window
   560px or taller. Keep all of it when the drop-in is updated.
   ========================================================================== */

.dodo-cc {
  /* --- brand tokens (locked, from DODO Design System v2.1) --- */
  --cc-peach: #f9aa8f;
  --cc-peach-hover: #f59a7b;
  --cc-peach-pressed: #ec8a6a;
  --cc-charcoal: #3d4543;
  --cc-green: #27a28c;
  --cc-light-teal: #b2dcd6;
  --cc-dark-teal: #00746a;
  --cc-white: #ffffff;
  --cc-light-grey: #eaebeb;
  --cc-grey: #adb1b0;

  /* --- geometry --- */
  /* Surfaces 16px. BUTTONS ARE SQUARE (radius 0) — house style, matches the
     live site (.btn on idodo). Do not round them. Pill is switches only. */
  --cc-radius: 16px;
  --cc-radius-pill: 999px;
  --cc-radius-btn: 0;

  /* --- motion --- */
  --cc-ease: cubic-bezier(0.2, 0, 0, 1);
  --cc-fast: 120ms;
  --cc-medium: 220ms;

  /* --- per-variant surface, overridden below --- */
  --cc-surface: #ffffff;
  --cc-border: 1px solid rgba(61, 69, 67, 0.14);
  --cc-shadow: 0 16px 40px -16px rgba(28, 33, 32, 0.28);
  --cc-fg: #3d4543;
  --cc-fg-muted: #3d4543;
  --cc-link: #00746a;
  --cc-rule: rgba(61, 69, 67, 0.12);
  --cc-ghost-border: #3d4543;
  --cc-ghost-hover: #eaebeb;
  --cc-track-off: #d6d8d7;
  --cc-focus: #00746a;
  --cc-cta-fg: #3d4543;
  --cc-cta-fg-hover: #3d4543;

  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 2147483000;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--cc-fg);
  -webkit-font-smoothing: antialiased;
}

.dodo-cc[hidden] { display: none !important; }

/* The container itself never takes clicks; only what it renders does (audit
   A11Y-05). On phones it spans the full width (left + right 12px) so the card
   can, but after consent it holds just the 44px pill — and the transparent
   rest of that strip swallowed taps on links, slots and form fields under it. */
.dodo-cc { pointer-events: none; }
.dodo-cc > * { pointer-events: auto; }

/* ---------- variants ---------------------------------------------------- */

/* dark / hairline — recommended on #050A09 */
.dodo-cc--hairline {
  --cc-surface: #0b1211;
  --cc-border: 1px solid rgba(255, 255, 255, 0.12);
  --cc-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  --cc-fg: #ffffff;
  --cc-fg-muted: #adb1b0;
  --cc-link: #b2dcd6;
  --cc-rule: rgba(255, 255, 255, 0.1);
  --cc-ghost-border: rgba(255, 255, 255, 0.45);
  --cc-ghost-hover: rgba(255, 255, 255, 0.08);
  --cc-track-off: rgba(255, 255, 255, 0.22);
  --cc-focus: #27a28c;
  --cc-cta-fg: #f9aa8f;
  --cc-cta-fg-hover: #14201c;
}

/* dark / teal edge */
.dodo-cc--teal {
  --cc-surface: #0b1211;
  --cc-border: 1px solid rgba(39, 162, 140, 0.45);
  --cc-shadow: 0 0 40px -12px rgba(39, 162, 140, 0.35), 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  --cc-fg: #ffffff;
  --cc-fg-muted: #adb1b0;
  --cc-link: #b2dcd6;
  --cc-rule: rgba(255, 255, 255, 0.1);
  --cc-ghost-border: rgba(255, 255, 255, 0.45);
  --cc-ghost-hover: rgba(255, 255, 255, 0.08);
  --cc-track-off: rgba(255, 255, 255, 0.22);
  --cc-focus: #27a28c;
  --cc-cta-fg: #f9aa8f;
  --cc-cta-fg-hover: #14201c;
}

/* dark / lifted — no border, separation by value */
.dodo-cc--lifted {
  --cc-surface: #141b1a;
  --cc-border: 1px solid transparent;
  --cc-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  --cc-fg: #ffffff;
  --cc-fg-muted: #adb1b0;
  --cc-link: #b2dcd6;
  --cc-rule: rgba(255, 255, 255, 0.1);
  --cc-ghost-border: rgba(255, 255, 255, 0.45);
  --cc-ghost-hover: rgba(255, 255, 255, 0.08);
  --cc-track-off: rgba(255, 255, 255, 0.22);
  --cc-focus: #27a28c;
  --cc-cta-fg: #f9aa8f;
  --cc-cta-fg-hover: #14201c;
}

/* light — fallback for light pages */
.dodo-cc--light {
  --cc-surface: #ffffff;
  --cc-border: 1px solid rgba(61, 69, 67, 0.14);
  --cc-shadow: 0 24px 60px -20px rgba(28, 33, 32, 0.32);
  --cc-fg: #3d4543;
  --cc-fg-muted: #3d4543;
  --cc-link: #00746a;
  --cc-rule: rgba(61, 69, 67, 0.12);
  --cc-ghost-border: #3d4543;
  --cc-ghost-hover: #eaebeb;
  --cc-track-off: #d6d8d7;
  --cc-focus: #00746a;
  /* Peach text on white is ~1.9:1 — the outline carries the CTA signal here
     and the label stays Charcoal. Same shape, legible. */
  --cc-cta-fg: #3d4543;
  --cc-cta-fg-hover: #3d4543;
}

/* ---------- card -------------------------------------------------------- */

.dodo-cc__card {
  width: 400px;
  max-width: calc(100vw - 24px);
  background: var(--cc-surface);
  border: var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: dodo-cc-rise var(--cc-medium) var(--cc-ease) both;
}

.dodo-cc__card--step2 {
  width: 440px;
  padding: 0;
  gap: 0;
  max-height: calc(100vh - 64px);
}

@keyframes dodo-cc-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dodo-cc__card, .dodo-cc__pill { animation: none; }
  .dodo-cc * { transition: none !important; }
  .dodo-cc__btn:hover { transform: none !important; }
}

/* ---------- path motif -------------------------------------------------- */

.dodo-cc__path { display: flex; align-items: center; gap: 8px; }
.dodo-cc__path i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cc-green); display: block;
}
.dodo-cc__path b {
  width: 0; height: 0; display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--cc-green);
}

/* ---------- type -------------------------------------------------------- */

.dodo-cc__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cc-fg);
  letter-spacing: -0.01em;
}

.dodo-cc__body {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cc-fg);
}

.dodo-cc--hairline .dodo-cc__body,
.dodo-cc--teal .dodo-cc__body,
.dodo-cc--lifted .dodo-cc__body { color: #eaebeb; }

.dodo-cc__helper {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cc-fg-muted);
}

.dodo-cc__overline {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-link);
  font-feature-settings: 'ss03' 1;
}

.dodo-cc a {
  color: var(--cc-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dodo-cc a:hover { color: var(--cc-link); }

/* ---------- buttons ----------------------------------------------------- */

.dodo-cc__actions { display: flex; gap: 8px; }
.dodo-cc__actions--stack { flex-direction: column; }

.dodo-cc__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--cc-peach);
  border-radius: var(--cc-radius-btn);
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: transform var(--cc-medium) var(--cc-ease),
              background var(--cc-medium) var(--cc-ease),
              border-color var(--cc-medium) var(--cc-ease),
              color var(--cc-fast) var(--cc-ease);
}

/* primary — Peach outline, fills on hover (matches .btn-coral on the site) */
.dodo-cc__btn--cta {
  border-color: var(--cc-peach);
  color: var(--cc-cta-fg);
}
.dodo-cc__btn--cta:hover {
  background: var(--cc-peach);
  color: var(--cc-cta-fg-hover);
  transform: translateY(-2px);
}
.dodo-cc__btn--cta:active {
  background: var(--cc-peach-pressed);
  border-color: var(--cc-peach-pressed);
  color: var(--cc-cta-fg-hover);
  transform: translateY(0);
}

/* secondary — neutral outline, same square shape, no Peach */
.dodo-cc__btn--ghost {
  border-color: var(--cc-ghost-border);
  color: var(--cc-fg);
}
.dodo-cc__btn--ghost:hover {
  background: var(--cc-ghost-hover);
  border-color: var(--cc-fg);
  transform: translateY(-2px);
}
.dodo-cc__btn--ghost:active { transform: translateY(0); }

.dodo-cc__btn:focus-visible,
.dodo-cc__toggle:focus-visible,
.dodo-cc__icon-btn:focus-visible,
.dodo-cc__pill:focus-visible {
  outline: 2px solid var(--cc-focus);
  outline-offset: 2px;
}

.dodo-cc__icon-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cc-fg);
  cursor: pointer;
  transition: background var(--cc-fast) var(--cc-ease);
}
.dodo-cc__icon-btn:hover { background: var(--cc-ghost-hover); }
.dodo-cc__icon-btn--back svg { transform: rotate(90deg); }

/* ---------- step 2 ------------------------------------------------------ */

.dodo-cc__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 24px 12px;
  flex: 0 0 auto;
}
.dodo-cc__head-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.dodo-cc__scroll {
  padding: 0 24px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dodo-cc__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--cc-rule);
}
.dodo-cc__row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.dodo-cc__row-name {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-fg);
  font-feature-settings: 'ss03' 1;
}
.dodo-cc__row-desc { font-size: 12px; line-height: 1.5; color: var(--cc-fg-muted); }

.dodo-cc__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--cc-rule);
  margin-top: 16px;
  flex: 0 0 auto;
}

/* ---------- toggle ------------------------------------------------------ */

.dodo-cc__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-track-off);
  cursor: pointer;
  transition: background var(--cc-fast) var(--cc-ease);
}
.dodo-cc__toggle[aria-checked="true"] { background: var(--cc-green); }
.dodo-cc__toggle[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.dodo-cc__toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(28, 33, 32, 0.24);
  transform: translateX(0);
  transition: transform var(--cc-fast) var(--cc-ease);
}
.dodo-cc__toggle[aria-checked="true"] span { transform: translateX(20px); }

/* ---------- re-entry pill ----------------------------------------------- */

/* Icon only, round, no frame (client, 9. 9. 2026). Deliberate deviation from
   the handoff's "0 tlačítka" radius: with the label gone there is no button
   shape left to square off, and a 40px ring reads as a control rather than a
   box parked over the page. The typography properties went with the text.

   WHAT DELIBERATELY DID NOT CHANGE: the surface and shadow stay, because this
   floats over photos and video where a bare 18px glyph would vanish; and the
   resting opacity stays at 1. Withdrawing consent has to be as easy as giving
   it, so this is not a control that gets to fade into the background. */
.dodo-cc__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow);
  color: var(--cc-fg);
  cursor: pointer;
  animation: dodo-cc-rise var(--cc-medium) var(--cc-ease) both;
}
.dodo-cc__pill svg { width: 18px; height: 18px; color: var(--cc-green); }

/* ---------- touch targets on a coarse pointer (local, K-04) ------------- */

/* A finger gets 44px (D106) while every control keeps the size it is drawn
   at: the switch stays a 44x24 track (D60 point 3), and from 641px wide the
   back arrow stays 32px and the pill 40px (the phone block below draws both
   at 44px already). An empty ::before, centred on the control, takes the tap
   for it; a tap on a pseudo-element is a tap on its element. Nothing paints
   it, and it adds no layout.
   There is room for each area: a switch sits 16px under its row's top rule
   and its area reaches 10px above and below it, still inside the row; the
   back arrow's 6px each side fall in the head's 24px padding and 12px gap;
   the pill's 2px reach past the container, whose own taps are off
   (A11Y-05), but the area belongs to the pill and takes taps as the pill
   does. Top, height and the
   negative margin are pixels on purpose: scripts/mobile-scan.mjs counts an
   area like this one only from px values and without a translate. */
@media (pointer: coarse) {
  .dodo-cc__icon-btn,
  .dodo-cc__pill { position: relative; }

  .dodo-cc__toggle::before,
  .dodo-cc__icon-btn::before,
  .dodo-cc__pill::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
  }
}

/* ---------- mobile ------------------------------------------------------ */

@media (max-width: 640px) {
  .dodo-cc {
    left: 12px;
    right: 12px;
    bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .dodo-cc__card,
  .dodo-cc__card--step2 {
    width: auto;
    max-width: none;
    padding: 20px;
  }
  .dodo-cc__card--step2 { padding: 0; }

  .dodo-cc__card--step2 { max-height: calc(100vh - 108px); }
  .dodo-cc__scroll { padding: 0 20px; }
  .dodo-cc__head { padding: 20px 20px 8px; }
  .dodo-cc__foot { padding: 16px 20px 20px; }

  .dodo-cc__actions { flex-direction: column; }
  .dodo-cc__btn { min-height: 48px; flex: 0 0 auto; }
  .dodo-cc__icon-btn { width: 44px; height: 44px; }
  .dodo-cc__pill { width: 44px; height: 44px; }
}

/* ---------- first layer in a low window (local, R14, audit A11Y-04) ----- */

/* In a window lower than 560px the first layer as delivered took most of the
   window, and keyboard focus had little or no room left above it (the KNOWN
   LIMIT note below; at 683x334, a 1366x768 laptop at 200% zoom, the band was
   -55px and 26 of the 39 Tab stops of /de/cookies ended fully behind the
   card). The client approved a compact first layer for these windows only
   (27. 10. 2026, R14 a, ADR D108): the same texts and the same two buttons,
   smaller. It is an exception to the frozen layout (D60 point 3, D05 C) for
   low windows; a window 560px or taller matches none of this and gets the
   card exactly as delivered.
   - The card runs along the bottom of the window between 12px gutters, the
     bar's own phone geometry, up to 880px wide (beyond that a line of text
     would pass 90 characters and the card would get no lower), and it drops
     the decorative path motif.
   - Title 16px, text 13px (the site's floor is 12px), button labels 14px.
     The buttons stay at least 44px tall on any pointer, so a touch target
     never shrinks below 44px.
   - From 640px wide the text and the two buttons share one row, the buttons
     keeping their width and the text wrapping beside them; below 640px the
     buttons share one row under the text. The switch sits where the back
     bar's own does, not at the bar's 640px phone breakpoint, which includes
     640px: from 640px wide the circle is sticky and a focused element keeps
     its clearance (packages/ui/styles/components.css), so at exactly 640px
     (a 1280px window at 200% zoom) the taller one-column card left a
     back-bar page 16px of band under that clearance at 640x334, against
     51px at 641px (Segoe UI, 29. 10. 2026).
   - The policy link stays on one line, so a hyphenated name such as
     "Cookie-Richtlinie" is never broken at its hyphen.
   The card is set in the visitor's system font: the stack above starts with
   Poppins, which this site does not load. Measured on 28. 10. 2026 with
   Segoe UI (Windows), in all five languages the card is 111px tall at
   683x334 and 92px at 1280x420 (the band above it 113px and 218px), 184 to
   203px at 320x420 (band 126 to 107px). A wider system font sets German,
   Hungarian and Slovak a line longer: with DejaVu Sans (most Linux systems)
   or Verdana 130px at 683x334 (band 94px), and German and Hungarian 111px
   at 1280x420 and 215 to 233px at 320x420 (band 95 to 77px; measured
   29. 10. 2026).
   Only the first layer changes. The settings (step 2) and the pill keep
   their size and their corner, so the container moves only while it holds
   the first layer (:has; a browser without it keeps the corner and still
   gets the smaller card). The script measures whatever height the card has
   into --dodo-cc-inset-bottom, so the room the page keeps for it (the rules
   below) and every reader of that property follow without a change. */
@media (max-height: 559.98px) {
  .dodo-cc:has(> .dodo-cc__card:not(.dodo-cc__card--step2)) {
    left: 12px;
    right: 12px;
    bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .dodo-cc__card:not(.dodo-cc__card--step2) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
    width: auto;
    max-width: 880px;
    padding: 12px;
  }
  .dodo-cc__card:not(.dodo-cc__card--step2) > .dodo-cc__path { display: none; }
  .dodo-cc__card:not(.dodo-cc__card--step2) .dodo-cc__title { font-size: 16px; }
  .dodo-cc__card:not(.dodo-cc__card--step2) .dodo-cc__body {
    font-size: 13px;
    line-height: 1.45;
  }
  .dodo-cc__card:not(.dodo-cc__card--step2) .dodo-cc__body a { white-space: nowrap; }

  .dodo-cc__card:not(.dodo-cc__card--step2) .dodo-cc__actions { flex-direction: row; }
  .dodo-cc__card:not(.dodo-cc__card--step2) .dodo-cc__btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }
}

@media (max-height: 559.98px) and (max-width: 639.98px) {
  .dodo-cc__card:not(.dodo-cc__card--step2) { grid-template-columns: minmax(0, 1fr); }
  .dodo-cc__card:not(.dodo-cc__card--step2) .dodo-cc__btn { flex: 1 1 0; }
}

/* ---------- host page while the card is open (local, audit A11Y-04) ----- */

/* The card is non-modal, so keyboard focus keeps moving through the page
   underneath it; on phones it covers roughly the lower half of the screen.
   The script sets data-dodo-cc-open and --dodo-cc-inset-bottom (the height
   the card covers) on <html> while the card is open, and removes both when
   only the pill is left.
   1. scroll-padding-bottom: the browser scrolls a newly focused element so it
      ends above the card instead of underneath it. Not enough for a text
      field: the browser brings only its caret line into view, so the script
      lifts a keyboard-focused field that still ends partly behind the card
      (liftFocused() in dodo-cookie-bar.js; the /cs contact form's message
      field at 320x640 ended 38 to 52% behind it, dev, 22. 10. 2026).
   2. The same room under the page: without it the last links of the footer
      could never scroll above the card, because the page ends first.
   Attribute-scoped, so it outranks a plain `html {}` / `body {}` rule of the
   host and costs nothing after the visitor has chosen.
   KNOWN LIMIT: this works only while the focused element fits in the band
   between the two paddings: the viewport minus the strip the card covers
   and the host's top scroll padding (the sticky header line, 90px on this
   site). On a page with the back bar, from 640px wide, a focused element in
   main or the footer also keeps 8px clear of the back circle
   (scroll-margin-top of 62 to 74px, packages/ui/styles/components.css), and
   that clearance has to fit in the band too.
   - The card as delivered covers a strip of 299px (the English desktop
     card, more where the text is longer). That leaves a 43px footer link
     room from about 420px of window height, from about 500px on a back-bar
     page, and an 81px GAIA module chip from about 560px (measured
     21. 10. 2026 on /cookies and /de/gaia, 683 to 1280px wide). Since R14
     it is shown only in a window 560px or taller.
   - Below 560px the compact first layer above covers 131px at 683px wide
     and 112px from 1024px wide (204 to 223px at 320px wide), in Segoe UI.
     The footer link then keeps clear of the card and the circle down to a
     window of about 330px at 683px wide (683x334, a 1366x768 laptop at 200%
     zoom, leaves a band of 113px) and the chip down to about 365px
     (measured 28. 10. 2026 on /cookies, /de/cookies, /hu/cookies, /de/gaia
     and /hu). In a wider system font (DejaVu Sans, Verdana) the German,
     Hungarian and Slovak card covers 150px at 683x334, a band of 94px: there
     the link and the clearance no longer fit together, so a footer link on
     a back-bar page ends with its top on the line and its last pixels
     behind the card.
   Below that, and always for an element taller than the band (the cookie
   table on /cookies, a GAIA module panel, the large cards on the home
   page), the element ends partly behind the open card, but with its top in
   view: the browser would centre it, and centred its top went under the
   header (audit A11Y-08: the About page's coverage map at 23px at
   1280x720), so the script puts the top of every element taller than the
   band on the line, below the circle's clearance (liftFocused() in
   dodo-cookie-bar.js). Only once that line sits at or below the card's top
   edge is no band left at all: in a window under about 220px at 683px wide,
   under about 285px there on a page with the back bar (its line sits lower
   by the circle's clearance, 62px at 683px wide), and under 295 to 315px at
   320px wide, where the circle needs no clearance; in a wider system font
   under about 240px and 300px at 683px wide. Then the browser's
   position stands, and an element in the card's column can end fully
   behind it.
   Dropping the circle's clearance while the card is open is no way out:
   focus then ends far more under the circle instead (with the card as
   delivered, the "previous module" arrow of /de/gaia fully at 1280x480,
   where the clearance leaves 3%; footer links 19% on Shift+Tab at 683x720,
   where it leaves none). cookie-bar.spec.ts records the limit. */
html[data-dodo-cc-open] { scroll-padding-bottom: var(--dodo-cc-inset-bottom, 0px); }
html[data-dodo-cc-open] body { padding-bottom: var(--dodo-cc-inset-bottom, 0px); }

/* ---------- host page while its mobile menu is open (local, audit A11Y-04) */

/* The bar sits above every layer of the host, the fullscreen mobile menu
   included, so on a phone the open card covered the menu's last items
   (Franchise, the language switcher, Contact) and a tap on the switcher
   pressed "Accept all"; the pill sat over the corner of Contact. The menu is
   modal, so the bar has nothing to offer while it is open: the host marks
   <html> with data-site-menu-open (SiteHeader in packages/ui) and the bar,
   card or pill, is hidden until the menu closes. Nothing is decided, the
   question stays open. visibility, not display: the card keeps its box, so
   the room the rule above reserves stays as it is (the page behind does not
   change length or scroll position), and it comes back as it was, without
   running its rise animation again. A hidden element takes no tap, no focus
   and leaves the accessibility tree. */
html[data-site-menu-open] .dodo-cc { visibility: hidden; }

/* ---------- print (local addition, audit UX-07) -------------------------- */

/* A fixed element is printed on EVERY sheet, so the pill (or the card, if
   consent is still open) sat over the last lines of each printed page. On
   paper there is nothing to consent to and nothing to click. The room the
   A11Y-04 rule above keeps under the page for the open card goes with it,
   so paper gets no blank band at the end. */
@media print {
  .dodo-cc { display: none !important; }
  html[data-dodo-cc-open] body { padding-bottom: 0; }
}