/**
 * Cookie consent banner — styles for the element `public/alembic-tracker.js`
 * builds in showBanner(). Previously assembled inline via `style.cssText`
 * (~200 lines of it); moved here so the banner is themeable CSS instead of a
 * JS string, and so a page loading this file gets dark mode for free.
 *
 * Tokens: `--card` / `--ink-900` / `--ink-100` / `--ink-200` / `--ink-300` /
 * `--action-surface` / `--action-surface-hover` / `--well` are the Dot
 * Language tokens marketing pages already define (public/css/marketing.css).
 * Each also carries a second fallback for the authenticated SPA shell, which
 * loads this same tracker but defines the numbered --color-* scale instead —
 * never the marketing token names. A page missing both falls back to the
 * literal hex last used in the original inline styles.
 */

#alembic-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--card, var(--color-white, #FFFFFF));
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  padding: 20px 24px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-900, var(--color-ink-900, #37404A));
  border-top: 1px solid var(--ink-100, var(--color-ink-100, #E3E6E9));
  outline: none;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#alembic-consent-banner .inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

#alembic-consent-banner p {
  margin: 0;
  flex: 1 1 300px;
}

#alembic-consent-banner a {
  /* --action-text, not --action-surface: this is a link ON the card
     background, not a filled button. --action-surface is the fill token — it
     is IDENTICAL in both themes (#3E7A5B), so on the dark card (--card
     #1F1C18) it only clears 3.3:1, failing AA. --action-text is the
     text-weight token, tuned per theme (#35684E light / #66A585 dark) to
     stay legible on a plain background in both. */
  color: var(--action-text, var(--color-action, #35684E));
  text-decoration: underline;
  white-space: nowrap;
  font-weight: 500;
}

#alembic-consent-banner .btn-wrap {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

#alembic-consent-banner button {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.4;
  border: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#alembic-consent-banner .btn-accept {
  background: var(--action-surface, var(--color-action, #3E7A5B));
  color: #fff;
}

#alembic-consent-banner .btn-accept:hover,
#alembic-consent-banner .btn-accept:focus-visible {
  background: var(--action-surface-hover, var(--color-action-hover, #35684E));
}

#alembic-consent-banner .btn-decline {
  background: var(--card, var(--color-white, #FFFFFF));
  color: var(--ink-700, var(--color-ink-700, #37404A));
  border: 1px solid var(--ink-200, var(--color-ink-200, #E3E6E9));
}

#alembic-consent-banner .btn-decline:hover,
#alembic-consent-banner .btn-decline:focus-visible {
  border-color: var(--ink-300, var(--color-ink-300, #CFC9C2));
  background: var(--well, var(--color-ink-50, #F2F0ED));
}

/*
 * `flex-basis` applies to the container's MAIN axis. Once the container
 * below switches to a column, that axis is vertical, so a bare `flex: 1 1
 * 300px` on <p> would become a 300px minimum HEIGHT — the banner used to
 * grow to ~447px, over half of a 812px viewport, mostly empty space, on
 * every page of the site. `flex: 0 0 auto` here is the fix.
 */
@media (max-width: 600px) {
  #alembic-consent-banner .inner {
    flex-direction: column;
    align-items: stretch;
  }

  #alembic-consent-banner .btn-wrap {
    flex-direction: column;
  }

  #alembic-consent-banner p {
    flex: 0 0 auto;
  }
}