/* consent.css — L7. Calm, equal-weight consent panel. Tokens only (css/tokens.css). */

.consent {
  position: fixed;
  z-index: var(--z-consent);
  inset-inline: var(--s-16);
  inset-block-end: calc(var(--s-16) + env(safe-area-inset-bottom, 0px));
  max-inline-size: 30rem;
  margin-inline-start: auto;
  container-type: inline-size;
  container-name: consent;
  opacity: 0;
  transform: translateY(var(--s-12));
  transition:
    opacity var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out);
}
.consent[hidden] { display: none; }
.consent.is-visible { opacity: 1; transform: none; }

.consent__box {
  display: grid;
  gap: var(--s-12);
  padding: var(--s-24);
  background: var(--c-surface);
  border: var(--hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-lift);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, transparent)) {
  .consent__box {
    background: color-mix(in srgb, var(--c-surface) 90%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
  }
}

.consent__label,
.consent__state {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.consent__state[hidden] { display: none; }

.consent__text { margin: 0; color: var(--c-ink); }

.consent__more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  margin-block: calc(var(--s-12) * -1);
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.consent__more:hover { text-decoration-thickness: 2px; }

.consent__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  margin-block-start: var(--s-4);
}
@container consent (min-width: 22rem) {
  .consent__actions { grid-template-columns: 1fr 1fr; }
}

/* both choices: identical size, weight, colour (equal prominence) */
.consent__btn {
  appearance: none;
  min-block-size: var(--tap);
  padding-inline: var(--s-16);
  border: var(--hairline);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out);
}
.consent__btn:active { transform: scale(.98); }
.consent__btn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); }

@media (hover: hover) and (pointer: fine) {
  .consent__btn:hover { background: var(--c-ink); color: var(--c-on-ink); }
}

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

@media (min-width: 760px) {
  .consent {
    inset-inline: auto var(--s-24);
    inset-block-end: calc(var(--s-24) + env(safe-area-inset-bottom, 0px));
    inline-size: 30rem;
  }
}

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