/* ==========================================================================
   COMPONENTS · COOKIE BANNER — the consent notice (mandatory in the EU) set as a
   lifted paper slip: a hairline sheet popped off the page on --shadow-pop, fixed
   to the foot of the window in production. A dignified row of three actions —
   solid-ink "Accept all", a paper "Reject", a quiet "Preferences" — never a
   rubric-red CTA. Stacks below the small breakpoint.
   ========================================================================== */

.op-consent {
  position: fixed;
  inset-inline: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-overlay);
  margin-inline: auto;
  max-inline-size: var(--container-wide);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  padding: var(--space-md);
}

/* — Embedded: drop it out of the fixed layer so the showcase can frame it
   inside a bounded stage instead of floating over the page — */
.op-consent--embedded {
  position: static;
  inset: auto;
  z-index: auto;
  margin-inline: 0;
  max-inline-size: none;
}

.op-consent__body {
  flex: 1 1 24rem;
  min-inline-size: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.op-consent__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin-bottom: var(--space-3xs);
}

/* — Actions: a tight row, kept off the rubric (ink primary, paper secondary,
   quiet ghost). flex:none so the copy column takes the slack — */
.op-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  flex: none;
}

/* — Stack on narrow viewports; let the actions fill the column — */
@media (max-width: 40rem) {
  .op-consent { flex-direction: column; align-items: stretch; }
  .op-consent__actions { justify-content: stretch; }
  .op-consent__actions .op-btn { flex: 1 1 auto; }
}