/* ==========================================================================
   11 Plus Blocks: the cookie banner, and the controls on the privacy page
   --------------------------------------------------------------------------
   Loaded by the marketing site AND the web app, which share tokens.css and
   nothing else, so everything here is built from tokens alone. The site's
   .btn and .card are not available inside /webapp/.

   **A bar fixed to the bottom of the screen that slides up**, the pattern
   nearly every website uses (Dean, 16 Sep 2026). It sits above the site's
   sticky "Try the web app" bar (z-index 90) and below the header (100), so an
   open phone menu still covers it. While it is up the body gets padding the
   height of the bar (analytics.js measures it), or the end of the page could
   never be scrolled out from under it.

   It replaced a banner in the flow at the top of the page, which pushed the
   sticky header down and put the phone menu's panel over both.

   **Accept and Reject look identical.** Rejecting must be as easy as
   accepting, and a pale "reject" beside a bold "accept" is the pattern the
   ICO names as not a free choice.
   ========================================================================== */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--plate);
  border-top: 1px solid var(--plate-edge);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-family: var(--font-body);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.consent.is-in { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

body.has-consent { padding-bottom: var(--consent-height, 0px); }

.consent__inner {
  display: grid;
  gap: var(--space-xs) var(--space-l);
  align-items: center;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-s) var(--page-pad) calc(var(--space-s) + env(safe-area-inset-bottom));
}

/* Side by side once there is room: the question on the left, the answers on
   the right, so the bar stays a bar rather than a sheet. */
@media (min-width: 60rem) {
  .consent__inner { grid-template-columns: 1fr auto; }
  /* The link under the two buttons, or the answers take half the bar and
     squeeze the question into a tall column. */
  .consent__actions { max-width: 30rem; justify-content: center; }
  .consent__actions .consent__link { flex-basis: 100%; text-align: center; }
}

.consent__title {
  margin: 0 0 var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  color: var(--deep);
}

.consent p {
  max-width: 46rem;
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.5;
}
.consent p + p { margin-top: var(--space-3xs); }

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
}

.consent__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7em 1.25em;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--chrome);
  color: var(--on-accent);
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out);
}
.consent__btn:hover { filter: brightness(1.1); }

.consent__link {
  color: var(--deep);
  font-weight: 700;
}

.consent__btn:focus-visible,
.consent__link:focus-visible {
  outline: 3px solid var(--blockie);
  outline-offset: 2px;
}

/* On a narrow screen the two answers share a row at equal width when both
   labels fit on one line, and stack at full width when they do not. Never a
   wrapped label on one and not the other: they must look identical. */
@media (max-width: 40rem) {
  .consent__btn { flex: 1 1 12rem; white-space: nowrap; }
  .consent__link { flex-basis: 100%; }
}

/* --- The privacy page --------------------------------------------------- */

.consent-controls {
  margin: var(--space-m) 0;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-card);
  background: var(--plate);
  border: 1px solid var(--plate-edge);
}
.consent-controls p { margin: 0; font-weight: 700; color: var(--deep); }
.consent-controls .consent__btn[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--plate), 0 0 0 5px var(--chrome);
}