/* Cookie notice (assets/js/consent.js). Uses the colour tokens that site.css and landing.css
   both define, so it follows the light and dark themes on every page. */
.consent {
  position: fixed; z-index: 60;
  left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 40rem; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  padding: 1rem 1.1rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  font: 400 .95rem/1.5 var(--font);
}
.consent p { margin: 0; flex: 1 1 18rem; }
.consent a { color: var(--brand); }
.consent-btns { display: flex; gap: .6rem; margin-left: auto; }
.consent-btn {
  min-height: 44px; min-width: 6.5rem; padding: .5rem 1.1rem;
  border: 2px solid var(--brand); border-radius: 999px;
  background: transparent; color: var(--brand);
  font: 600 .95rem/1 var(--font); cursor: pointer;
}
.consent-btn.consent-yes { background: var(--brand); color: var(--brand-ink); }
.consent-btn:hover { text-decoration: underline; }
.consent-btn:focus-visible, .consent-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Footer "Cookie settings": a button that looks like the footer links. */
.consent-open {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@media (max-width: 30rem) {
  .consent-btns { width: 100%; }
  .consent-btn { flex: 1; }
}
@media print { .consent { display: none; } }