/* Analytics choice bar (2026-09-22, audit live-LIVE-02).
   Loaded by site/templates/base.html and by app/start/index.html, so one file
   dresses the bar on dovetly.com and on the checkout page. Design system:
   peach background, pill buttons, terracotta only on the accept button,
   radius from the 12 to 24 range, no shadow and no gradient.
   Markup is built by shared/consent.js; nothing here applies until it runs. */

.consent {
  position: fixed;          /* out of the flow, so the page never shifts */
  z-index: 40;              /* under the toast (50) and the payment overlay (1000) */
  left: 16px; right: 16px; bottom: 16px;
  max-width: 620px;
  padding: 16px;
  background: var(--peach, #fde7dc);
  color: var(--ink, #1f2430);
  border: 1px solid var(--line-2, #d6d3cf);
  border-radius: var(--r-md, 16px);
}

.consent__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.consent__text { flex: 1 1 260px; margin: 0; font-size: 14.5px; line-height: 1.5; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent__actions .btn { white-space: nowrap; }

@media (min-width: 720px) {
  .consent { right: auto; padding: 18px 20px; }
}

/* the bar slides up once, and only for people who did not ask for less motion */
@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-in .18s ease-out both; }
  @keyframes consent-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* the line on the privacy page that says where the answer stands right now */
.consent-state:empty { display: none; }