/* Cookie banner and settings dialog, shared by every page. */
.consent-banner,
.consent-dialog {
  --consent-surface: #1c1c1c;
  color: var(--ink);
  background: var(--consent-surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  font: 400 14px / 1.45 var(--sans);
}
.consent-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 950;
  width: min(440px, calc(100vw - 48px));
  padding: 20px;
  box-shadow: 0 24px 64px rgb(0 0 0 / 45%);
}
.consent-banner[hidden] {
  display: none;
}
.consent-banner p,
.consent-dialog p {
  margin: 0;
}
.consent-banner a,
.consent-dialog p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.consent-banner .consent-actions {
  margin-top: 24px;
}
/* Dialog buttons share one weight. The banner makes Accept the primary. */
.consent-actions button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: rgb(255 255 255 / 12%);
  font: 400 14px / 1 var(--sans);
  cursor: pointer;
}
/* style.css turns every landing button white on hover, which would hide the
   white label. This selector outranks it (0,4,1 vs 0,3,1) whatever order the
   stylesheets load in, and keeps the dark surface. */
.consent-banner .consent-actions button:not(:disabled):hover,
.consent-dialog .consent-actions button:not(:disabled):hover {
  background: rgb(255 255 255 / 22%);
  box-shadow: 0 0 16px rgb(255 255 255 / 12%);
}
/* Banner hierarchy: Accept is the filled primary, like the site's Sign up
   button; Manage Preferences is a quiet outlined button of the same size. */
.consent-banner [data-choice="accept"] {
  color: #111;
  background: #fff;
}
.consent-banner [data-choice="customize"] {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--rule);
}
.consent-banner
  .consent-actions
  button[data-choice="accept"]:not(:disabled):hover {
  background: #fff;
  box-shadow: 0 0 20px rgb(255 255 255 / 35%);
}
.consent-banner
  .consent-actions
  button[data-choice="customize"]:not(:disabled):hover {
  color: var(--ink);
  background: rgb(255 255 255 / 8%);
  border-color: var(--ink);
  box-shadow: none;
}
.consent-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 28px;
  overflow: auto;
}
.consent-dialog::backdrop {
  background: rgb(0 0 0 / 60%);
}
.consent-dialog h2 {
  margin: 0 0 8px;
  font: 400 28px / 1.1 var(--serif);
}
.consent-dialog h3 {
  margin: 0;
  font: 400 15px / 1.4 var(--sans);
}
.consent-category {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.consent-category p {
  margin-top: 6px;
  color: var(--muted);
}
.consent-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.consent-always {
  color: var(--muted);
}
.consent-category input[type="checkbox"] {
  appearance: none;
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 18%);
  cursor: pointer;
  transition: background 0.15s;
}
.consent-category input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.15s;
}
.consent-category input[type="checkbox"]:checked {
  background: #6f9f6a;
}
.consent-category input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}
.consent-category label {
  cursor: pointer;
}
@media (max-width: 760px) {
  .consent-banner {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: calc(100vw - 32px);
    padding: 16px;
  }
  .consent-actions button {
    min-height: 44px;
  }
  .consent-dialog {
    padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .consent-category input[type="checkbox"],
  .consent-category input[type="checkbox"]::after {
    transition: none;
  }
}