/* ==========================================================================
   Cookie Notice — the acknowledgement banner

   A bar along the bottom rather than a modal: it has nothing to ask, so it has
   no business blocking the page while it says so.
   ========================================================================== */
.cookie-notice {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-5);
  z-index: var(--z-cookie-notice);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: cookie-notice-rise var(--transition-slow);
}

@keyframes cookie-notice-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-4));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice {
    animation: none;
  }
}

.cookie-notice__title {
  font-family: var(--font-family-bold);
  font-weight: 600;
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.cookie-notice__text {
  font-size: var(--font-size-medium);
  line-height: 1.6;
  color: var(--color-text);
}

.cookie-notice__link {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-notice__form {
  flex-shrink: 0;
}

.cookie-notice__button {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cookie-notice {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
}

/* ==========================================================================
   Room for it

   The banner is fixed over the bottom of the viewport, so every pane that
   scrolls to a bottom edge has to leave space under its content. Without this
   the banner sits on top of the last thing on the page — which, on the
   acceptance gate, is the button the user has to press to get past it.

   Set from the body class the layouts add while the banner is showing, so the
   space disappears with the banner rather than being left behind as a gap.

   One entry per full-screen backdrop that scrolls inside itself: the auth
   screens, the satisfaction survey, and the two legal pages. Padding the body
   would do nothing for them — each is `position: fixed; inset: 0` and scrolls
   its own contents, so the space has to be added inside.

   A new full-screen page of that shape needs a line here, or the banner will
   sit on whatever button it ends with. The application shell is a different
   problem and is handled below.
   ========================================================================== */
.has-cookie-notice .legal-doc,
.has-cookie-notice .legal-gate,
.has-cookie-notice .login-form,
.has-cookie-notice .survey-page {
  padding-bottom: 12rem;
}