/* <ad-consent>: a fixed, non-modal banner at the bottom of the viewport.
 * The component sets scroll-padding on the document while it is visible so
 * that focused elements scroll clear of it. */
.consent {
  --flow-space: var(--space-xs);
  position: fixed;
  inset-block-end: var(--space-s);
  inset-inline: var(--space-s);
  z-index: 80;
  margin-inline: auto;
  max-inline-size: 46rem;
  max-block-size: calc(100svh - 2 * var(--space-s));
  overflow: auto;
  padding: var(--space-m);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.consent > * + * {
  margin-block-start: var(--flow-space);
}

.consent__title {
  font-size: var(--text-1);
}

.consent__text {
  font-size: var(--text--1);
  color: var(--text-muted);
  max-inline-size: none;
}

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

/* Accept and reject look the same: no dark pattern. */
.consent__actions .button[data-consent="reject"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.consent__settings {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-s);
}

.consent__option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2em 0.6em;
  align-items: start;
  min-block-size: var(--target-comfortable);
}

.consent__option input {
  margin-block-start: 0.25em;
}

.consent__option-note {
  grid-column: 2;
  font-size: var(--text--1);
  color: var(--text-muted);
}

.consent__policy {
  font-size: var(--text--1);
}

@media (width < 40em) {
  .consent {
    inset-inline: var(--space-2xs);
    inset-block-end: var(--space-2xs);
    padding: var(--space-s);
  }

  .consent__actions .button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .consent:not([hidden]) {
    animation: consent-in var(--duration-slow) var(--ease-out);
  }

  /* Movement only: text never passes through a low-contrast state. */
  @keyframes consent-in {
    from {
      translate: 0 1.5rem;
    }
  }
}