/* The consent banner and the choice form, from internal/analytics.
 *
 * Linked only by a page that renders one of them, so a deployment without GA4 -- and a
 * visitor who has already answered -- never fetches this file at all.
 *
 * Written against the design system's tokens, which every stack loads before its own
 * sheet. That is what lets one file serve three: the landing page, the docs and the
 * portal, including the portal's dark mode, where portal.css remaps exactly these tokens.
 * The value after each var() is the light-mode token, used only if ds/styles.css is
 * missing.
 */
/* The inline padding is the landing page header's own formula (site.css, .nav), so on the
 * page most visitors meet first the banner's text starts where the brand does. The docs
 * and the portal define --edge differently or not at all; there the banner is simply
 * centred on the same 1200px column. */
.consent {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3, 13px) var(--space-6, 26px);
  padding: var(--space-3, 13px) max(var(--edge, 20px), calc((100% - 1200px) / 2 + var(--edge, 20px)));
  background: var(--color-surface, #ebddc5);
  color: var(--color-text, #201e1d);
  border-bottom: 1px solid var(--color-divider, #d9cbb4);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 14px; line-height: 1.5;
}
.consent-body { flex: 1 1 30rem; min-width: 0; max-width: 72ch; }
.consent-body p { margin: 0; }
.consent-body p + p { margin-top: var(--space-1, 4px); }
.consent-title { font-weight: 700; }

/* Ink-coloured and underlined rather than the accent. The accent on the surface colour
 * is about 3.4:1, short of the 4.5:1 body-size text needs; the text colour is not, in
 * either mode, and the underline is what marks it as a link. */
.consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* The two answers, side by side and wrapping together on a narrow screen. Shared with
 * /privacy, where the same form changes an answer already given. */
.consent-choice { display: flex; flex-wrap: wrap; gap: var(--space-2, 9px); margin: 0; }