/* The consent banner and the cookie choices dialog (templates/partials/consent.njk,
   src/client/consent.js). Loaded deferred, and only when marketing tags are
   configured; nothing here paints until the script reveals the banner.

   Built from the site's existing tokens and .btn so it can move onto the WS-01
   primitives (button, switch, dialog) without a redesign: every value below is
   a token, and the few component rules are the ones those primitives will own.
   Accept and Reject share one component on purpose; neither may be the filled
   magenta action. */

.consent-banner {
  position: fixed;
  z-index: var(--z-toast);
  /* Bottom right, above the back-to-top button: the site's heroes put their
     actions on the left, so a card there covered the first thing to press. */
  inset-inline-end: var(--space-6);
  inset-block-end: calc(var(--space-6) + 44px + var(--space-3));
  width: min(24rem, calc(100vw - 2 * var(--space-6)));
  max-height: calc(100vh - 2 * var(--space-6) - 44px - var(--space-3));
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-dialog);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--elev-2);
}

.consent-banner[hidden] { display: none; }

.consent-banner__title,
.consent-dialog__title {
  margin: 0 0 var(--space-2);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--text-primary);
}

.consent-banner__text,
.consent-banner__note {
  margin: 0;
  font-size: var(--type-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.consent-banner__note { margin-top: var(--space-2); }

.consent-banner a,
.consent-dialog a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.consent-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Accept all and Reject all: one component, one weight. */
.btn.consent-button,
.btn.consent-button:hover {
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-inverse);
}

.btn.consent-button:hover { opacity: 0.9; }

.btn.consent-button--quiet,
.btn.consent-button--quiet:hover {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn.consent-button--quiet:hover { background: var(--surface-soft); opacity: 1; }

.consent-text-button {
  justify-self: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-link);
  font: inherit;
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.consent-banner :focus-visible,
.consent-dialog :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The preferences centre: a native modal dialog, so focus is held, Escape
   closes it and the page behind is inert without any script of ours. */
.consent-dialog {
  width: min(38rem, calc(100vw - 2 * var(--space-4)));
  max-height: min(48rem, calc(100vh - 2 * var(--space-4)));
  /* The site's reset zeroes margins, which takes away the native centring. */
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-dialog);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--elev-2);
  overflow: hidden;
}

.consent-dialog[open] { display: flex; }

.consent-dialog::backdrop { background: rgba(3, 8, 14, 0.72); }

.consent-dialog__form {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  margin: 0;
}

.consent-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-6) var(--space-6) var(--space-2);
}

.consent-dialog__title { font-size: var(--type-title-5); }

.consent-dialog__intro {
  margin: 0 0 var(--space-4);
  font-size: var(--type-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.consent-choice {
  margin: 0;
  padding: var(--space-4) 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  min-width: 0;
}

.consent-choice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 44px;
  padding: 0;
  float: left;
}

.consent-choice__head + * { clear: both; }

.consent-choice__name {
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.consent-choice__always {
  font-size: var(--type-label);
  color: var(--text-tertiary);
}

.consent-choice__text,
.consent-choice__note {
  font-size: var(--type-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.consent-choice__text p,
.consent-choice > p.consent-choice__text { margin: var(--space-1) 0 0; }
.consent-choice__text strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.consent-choice__note { margin: var(--space-2) 0 0; }

.consent-choice code,
.consent-cookies code {
  font-size: 0.9em;
  color: var(--text-primary);
}

.consent-choice__details { margin-top: var(--space-3); font-size: var(--type-label); }

.consent-choice__details summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  list-style: none;
  color: var(--text-link);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.consent-choice__details summary::-webkit-details-marker { display: none; }


.consent-cookies {
  width: 100%;
  margin-top: var(--space-2);
  border-collapse: collapse;
  font-size: var(--type-label);
}

.consent-cookies th,
.consent-cookies td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: start;
  vertical-align: top;
  color: var(--text-secondary);
}

.consent-cookies th { color: var(--text-tertiary); font-weight: var(--weight-semibold); }
.consent-cookies td:first-child { white-space: nowrap; }

.consent-choice__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
}

.consent-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.consent-dialog__actions .btn { flex: 1 1 9rem; }

/* A switch built on the native checkbox: its role, keyboard and label come
   from the platform; this only draws it. */
.consent-switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface-soft);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.consent-switch::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--radius-full);
  background: var(--text-secondary);
  transform: translateY(-50%);
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.consent-switch:checked {
  background: var(--control-selected);
  border-color: var(--control-selected);
}

.consent-switch:checked::after {
  background: var(--surface-page);
  transform: translate(1.1875rem, -50%);
}

/* Phones: a sheet along the bottom edge, never more than 40% of the screen,
   clear of the home indicator. */
@media (max-width: 479.98px) {
  .consent-banner {
    inset-inline: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    width: 100%;
    max-height: 40vh;
    max-height: 40dvh;
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-inline: 0;
    border-block-end: 0;
    border-radius: var(--radius-dialog) var(--radius-dialog) 0 0;
  }

  .consent-banner__title { font-size: var(--type-label); margin-bottom: var(--space-1); }
  .consent-banner__text { font-size: var(--type-body-xs); }
  .consent-banner__actions { margin-top: var(--space-3); gap: var(--space-2); }

  .consent-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 90dvh;
    margin: auto 0 0;
    border-radius: var(--radius-dialog) var(--radius-dialog) 0 0;
  }

  .consent-dialog__body { padding: var(--space-5) var(--space-4) var(--space-2); }
  .consent-dialog__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  /* Save on its own row; Accept all and Reject all side by side at one size. */
  .consent-dialog__actions [data-consent-save] { grid-column: 1 / -1; }
}


/* Cookie settings in the footer's legal row: a button, because it opens the
   dialog rather than going anywhere, drawn like the links beside it. Rendered
   only when marketing tags are configured, and unhidden by consent.js, so it is
   never a dead control. */
.footer__legal-button {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--type-body-xs);
  color: var(--footer-link);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__legal-button:hover { color: var(--text-primary); }
.footer__legal-button[hidden] { display: none; }
.footer__legal-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }