/* ==========================================================================
   Cookie consent banner + preferences dialog
   Uses the site's design tokens, so light/dark themes work automatically.
   ========================================================================== */

.consent-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 900;
  padding: var(--space-sm);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-strong);
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.12);
}
.consent-banner[hidden] { display: none; }

.consent-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  max-width: 72rem;
  margin-inline: auto;
}

.consent-banner__text { flex: 1 1 24rem; max-width: 46rem; }
.consent-banner__text p { color: var(--color-text-muted); font-size: var(--step--1); line-height: var(--leading-snug); }
.consent-banner__title {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-text) !important;
  margin-bottom: var(--space-3xs);
}
.consent-banner__text a { color: var(--color-signal); text-decoration: underline; text-underline-offset: 0.15em; }
.consent-banner__text a:hover { color: var(--color-accent); }

.consent-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.consent-banner__actions .btn { justify-content: center; cursor: pointer; }

/* ---- Preferences dialog ---- */

.consent-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}
.consent-dialog::backdrop { background: rgb(0 0 0 / 0.55); }

.consent-dialog__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.consent-dialog__title { font-size: var(--step-1); }
.consent-dialog__lead { color: var(--color-text-muted); font-size: var(--step--1); line-height: var(--leading-snug); }

.consent-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}
.consent-option__name { display: block; font-family: var(--font-mono); font-weight: 600; font-size: var(--step--1); }
.consent-option__desc { margin-top: var(--space-3xs); color: var(--color-text-muted); font-size: var(--step--1); line-height: var(--leading-snug); }
.consent-option__input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; accent-color: var(--color-accent); cursor: pointer; }
.consent-option__input:disabled { cursor: not-allowed; opacity: 0.6; }

.consent-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-2xs); }
.consent-dialog__actions .btn { cursor: pointer; }

/* ---- Footer / policy page "Cookie settings" control, styled like a footer link ---- */

.footer__link-btn {
  padding: 0;
  text-align: left;
  color: var(--color-text-muted);
  font-size: var(--step--1);
}
.footer__link-btn:hover,
.footer__link-btn:focus-visible { color: var(--color-accent); }

/* ---- Cookie table on the privacy policy page ---- */

.cookie-table-wrap { margin-top: var(--space-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cookie-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}
.cookie-table th,
.cookie-table td {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.cookie-table th { color: var(--color-text); font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.cookie-table code { font-family: var(--font-mono); color: var(--color-text); }

/* Keep page content from hiding behind the banner when it's showing */
@media (max-width: 40rem) {
  .consent-banner__actions { width: 100%; }
  .consent-banner__actions .btn { flex: 1 1 auto; }
}