/* Consent banner.
   Its own stylesheet, loaded by build.py alongside the pixel, because the CSP
   allows no inline <style> and the two page families (site.css, lp.css) declare
   their design tokens in different formats. So the values here are literal, and
   they are the same palette: paper, ink, one accent.

   Deliberately light in both colour schemes. The site is locked to paper; the
   campaign page has a dark mode. A banner that followed the scheme would be a
   dark chip on a light site for anyone whose phone is set to dark, which reads
   as a bug. A light chip on a dark page reads as an overlay, which is what it
   is. */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  margin-inline: auto;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: #FFFFFF;
  color: #1A1C23;
  border: 1px solid #E3DFD9;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgb(26 28 35 / 0.16);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.consent[hidden] { display: none; }

.consent-text {
  flex: 1 1 260px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #5D606F;
}
.consent-text a { color: #BC3A1A; text-decoration: underline; }

.consent-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-actions button {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  /* 44px minimum, the same tap target the rest of the site holds to. */
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1),
              background 220ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.consent-actions button:active { transform: scale(0.97); }

/* Decline is a real choice, not a hidden one: same size, same prominence,
   readable contrast. A banner where refusing is harder than accepting is not
   consent. */
/* Scoped to beat `.consent-actions button`, which sets a transparent border in
   a shorthand and outranks a bare `.consent-no` on specificity. Unscoped, the
   Decline button lost its edge and read as a text link beside a filled Accept,
   which is exactly the imbalance that makes a consent banner invalid. */
.consent-actions .consent-no { background: transparent; color: #1A1C23; border-color: #CFC8BF; }
.consent-actions .consent-no:hover { border-color: #1A1C23; background: rgb(26 28 35 / 0.04); }

.consent-actions .consent-yes { background: #BC3A1A; color: #FFFFFF; border-color: #BC3A1A; }
.consent-actions .consent-yes:hover { background: #782A17; border-color: #782A17; }

.consent :focus-visible { outline: 2px solid #BC3A1A; outline-offset: 3px; }

@media (max-width: 520px) {
  .consent { gap: 12px; padding: 14px 16px; }
  .consent-actions { width: 100%; }
  .consent-actions button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-actions button { transition-duration: .001ms; }
}

/* The opt-out bar. It reports rather than asks, so it does not get the
   banner's weight: smaller, narrower, and parked in the corner instead of
   spanning the page. It also takes itself away after eight seconds.

   Opting out stays the prominent control, now more so than before: the way
   out is a full button, while dismissing is a cross. The permanent switch on
   the cookie notice is what keeps opting out possible once this is gone. */
.consent-slim {
  padding: 8px 8px 8px 14px;
  gap: 8px;
  max-width: 300px;
  margin-left: auto;
  margin-right: 0;
  flex-wrap: nowrap;
  /* Quieter than the banner in every way the banner is loud: no lift off the
     page, a hairline edge, and a ground barely off white. It is disclosure,
     not a question, and outside the EU nobody has to act on it for the
     measurement to happen. */
  box-shadow: 0 6px 18px rgb(26 28 35 / 0.08);
  border-color: #EBE7E1;
}
/* #82858F was quieter still, and measured 3.68 against white: under the 4.5
   WCAG AA needs for text this size. Quiet is a style choice; legible is not.
   #6E7179 keeps almost all of the softness at 4.88. */
.consent-slim .consent-text { font-size: 11.5px; line-height: 1.45; flex: 1 1 auto;
  color: #6E7179; }
.consent-slim .consent-actions { gap: 4px; }
.consent-slim .consent-no { padding: 9px 12px; font-size: 12px; }
.consent-actions .consent-dismiss {
  background: transparent;
  color: #5D606F;
  border-color: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  min-width: 44px;
}
.consent-actions .consent-dismiss:hover { color: #1A1C23; background: rgb(26 28 35 / 0.05); }

@media (max-width: 520px) {
  /* Back to full width on a phone, where a 380px corner chip is the width of
     the screen anyway. The text wraps, so the row may not. */
  .consent-slim { max-width: none; flex-wrap: wrap; }
  .consent-slim .consent-actions { width: auto; }
  .consent-slim .consent-no { flex: 0 0 auto; }
}

/* The permanent control on the cookie notice, which is what makes "you can
   opt out" true after the bar above has gone. */
.consent-switch { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 18px 0 26px; }
.consent-switch button {
  font: inherit; font-size: 14px; font-weight: 700; min-height: 44px;
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  background: transparent; color: #1A1C23; border: 1px solid #CFC8BF;
}
.consent-switch button:hover { border-color: #1A1C23; background: rgb(26 28 35 / 0.04); }
.consent-switch-state { margin: 0; font-size: 14px; font-weight: 700; }