/* ─────────────────────────────────────────────────────────────────────────────
   Cookie consent banner.

   Lives in its own file on purpose. A design pass may regenerate styles.css
   wholesale, and losing these rules would leave the consent banner unstyled —
   which means an unreadable legal control, not just an ugly one. Same reasoning
   as signup.js / chat.js. See CLAUDE.md.

   The markup is built by consent.js, so there is nothing to keep in index.html.
   ──────────────────────────────────────────────────────────────────────────── */

.consent-bar {
  position: fixed;
  z-index: 9000;
  left: 16px;
  right: 16px;
  bottom: 16px;
  margin: 0 auto;
  max-width: 640px;
  background: var(--ink-2, #1C2622);
  color: var(--ink-fg, #F4EDE3);
  border: 1px solid var(--rule, rgba(244, 237, 227, 0.12));
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  font-family: var(--font-sans, system-ui, sans-serif);
  /* Sit above the iOS home indicator when the sticky CTA is also present. */
  padding-bottom: max(20px, calc(16px + env(safe-area-inset-bottom)));
}

.consent-bar[hidden] { display: none; }

.consent-bar h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: var(--fw-bold, 700);
  letter-spacing: -0.01em;
  color: var(--ink-fg, #F4EDE3);
}

.consent-bar p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-fg2, rgba(244, 237, 227, 0.64));
}

.consent-bar a {
  color: var(--ink-fg, #F4EDE3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.consent-actions button {
  flex: 1 1 auto;
  min-width: 130px;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--fw-bold, 700);
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.consent-accept {
  background: var(--accent, #5F9569);
  color: #fff;
}

.consent-accept:hover { background: var(--accent-darker, #476453); }

/* Declining must be exactly as easy as accepting — equal weight, one click,
   no dark pattern. Styling it as a faint link would be a consent defect. */
.consent-decline {
  background: transparent;
  color: var(--ink-fg, #F4EDE3);
  border-color: var(--rule, rgba(244, 237, 227, 0.24));
}

.consent-decline:hover { background: rgba(244, 237, 227, 0.08); }

.consent-bar :focus-visible {
  outline: 2px solid var(--accent, #5F9569);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .consent-bar { left: 10px; right: 10px; bottom: 10px; padding: 18px; }
  .consent-actions button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .consent-bar { animation: consent-rise 0.28s ease-out; }
  @keyframes consent-rise {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}