/* Cookie choice banner (consent.js). The old pages' page.css/landing.css
   and the marketing site's tokens.css all define the colour tokens used here. Accept and Decline share one style on purpose:
   neither is the "obvious" button. */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid rgba(43,35,32,0.12);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(43,35,32,0.14);
  font: 400 14px/21px Inter, sans-serif;
  color: var(--ink);
}

.consent-text { margin: 0; }
.consent-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

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

.consent-btn {
  flex: 1 1 0;
  height: auto;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 500 14px/1 Inter, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
.consent-btn:hover { background: var(--ivory, var(--canvas)); filter: none; }
.consent-btn:focus-visible,
.consent-settings:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Looks like the footer links around it. The old pages' page.css styles
   every <button> as a big uppercase pill, so undo all of that here. */
.consent-settings {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--clay, inherit);
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.consent-settings:hover { filter: none; color: var(--clay-press, inherit); }
.consent-btn:hover, .consent-btn:active, .consent-settings:active { filter: none; transform: none; }

@media (min-width: 640px) {
  .consent { flex-direction: row; align-items: center; gap: 20px; }
  .consent-actions { flex: none; }
  .consent-btn { flex: none; min-width: 104px; }
}