/* Cookie consent bar (src/data/consent.js) — loaded on every public page: the SPA and the static
   landings, which map the same tokens in their own :root. One question, because there is one
   tracker (the decorative "1" beside the title was removed — owner 2026-09-27). Equal buttons — refusing is as easy as allowing
   (UAE PDPL: consent by an affirmative act, revocable any time). Surface tone and one hairline,
   no shadow, square corners.
   CONSTANT GEOMETRY: nothing here reads the safe-area inset or a viewport unit. iOS Safari and
   Chrome iOS flip the bottom inset (0 ↔ ~34 px) as the toolbar hides and shows; a box sized by it
   re-lays out on every scroll — the card "jittered" (owner, 3.137.0). It floats 24 px up instead,
   clear of the home-indicator zone in both toolbar states. */
.fu-cookiebar {
  position: fixed;
  inset-inline-start: 24px;
  bottom: 24px;
  z-index: 95;                                   /* above the header and the back-to-top ball, below modals */
  width: min(420px, calc(100% - 48px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px 20px;
  background: var(--ink-deep);
  border-top: 1px solid var(--bone-faint);
  color: var(--bone);
  font-family: var(--font-sans);
  animation: fuConsentIn 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fu-cookiebar[hidden] { display: none; }
/* While the card is open the page's end stays reachable: padded by the card's MEASURED height
   (consent.js sets --fu-cookiebar-h), never a hand-kept number. */
html.fu-cookiebar-open body { padding-bottom: calc(var(--fu-cookiebar-h, 0px) + 24px); }
@keyframes fuConsentIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .fu-cookiebar { animation: none; } }

.fu-cookiebar-body { min-width: 0; }
.fu-cookiebar-title {
  margin: 0;
  padding-inline-end: 32px;                      /* room for the close button once a choice exists */
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fu-cookiebar-title .italic { color: var(--accent); font-style: italic; font-weight: 800; }
.fu-cookiebar-text {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bone-dim);
}
.fu-cookiebar-state {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bone);
}
.fu-cookiebar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.fu-cookiebar-btn {
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--bone-faint); /* ui-allow-frame: a real control */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.fu-cookiebar-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Owner, 2026-09-27: "Allow" is the orange fill; "No thanks" is smaller and quieter, but still a
   44px, keyboard-reachable button whose label reads at >= 4.5:1 (consent.js, CTA_DESIGN). */
.fu-cookiebar-btn--yes { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.fu-cookiebar-btn--yes:hover { background: var(--bone); border-color: var(--bone); color: var(--ink-deep); }
.fu-cookiebar-btn--no { border-color: transparent; color: var(--bone-dim); font-size: 10px; font-weight: 700; padding: 0 8px; min-width: 44px; }
.fu-cookiebar-btn--no:hover { border-color: transparent; color: var(--bone); }
.fu-cookiebar-btn[aria-pressed="true"] { background: var(--bone); color: var(--ink-deep); border-color: var(--bone); }
.fu-cookiebar-btn:focus-visible,
.fu-cookiebar-more:focus-visible,
.fu-cookiebar-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fu-cookiebar-more {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.fu-cookiebar-more:hover { color: var(--bone); }
.fu-cookiebar-close {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--bone-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.fu-cookiebar-close:hover { color: var(--bone); }

/* Phone: a floating card across the width, 24 px off the bottom — constant in both toolbar states.
   Title, text and the two answers each take the card's full width. */
@media (max-width: 640px) {
  .fu-cookiebar {
    inset-inline: 12px;
    bottom: 24px;
    width: auto;
    grid-template-areas: "title" "text" "state" "acts";
    column-gap: 10px;
    row-gap: 0;
    padding: 12px 14px;
  }
  .fu-cookiebar-body { display: contents; }
  .fu-cookiebar-title { grid-area: title; font-size: 13px; }
  .fu-cookiebar-text { grid-area: text; margin-top: 8px; font-size: 11.5px; line-height: 1.45; }
  .fu-cookiebar-state { grid-area: state; }
  .fu-cookiebar-acts { grid-area: acts; margin-top: 10px; }
  .fu-cookiebar-btn { flex: 1 1 0; padding: 0 10px; }
  .fu-cookiebar-btn--no { flex: 0 0 auto; padding: 0 8px; }
}