/* Consent banner and cookie-settings dialog of public/site.js, on every page that loads site.js with
   <body data-consent-banner>: linked before site.css by the legal pages (scripts/build-legal.mjs), public/404.html, the
   Worker pages (worker/layout.ts) and the marketing shell (index.html). Everything is scoped to .cc-*. It reads the page's tokens (--surface, --surface-2,
   --border, --text, --muted, --faint, --accent, --accent-text, --shadow), which site.css and marketing.css both
   define; the fallbacks keep it legible anywhere else. */
.cc-banner {
  position: fixed; z-index: 50; left: 50%; bottom: 16px; translate: -50% 0;
  width: min(780px, calc(100vw - 32px)); display: flex; align-items: center; gap: 20px; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px);
  font-size: 0.9rem; line-height: 1.55;
}
.cc-text { flex: 1; min-width: 0; }
.cc-banner h2, .cc-dialog h2 { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }
.cc-banner p { margin: 0; color: var(--muted); }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; width: 320px; }
.cc-more {
  grid-column: 1 / -1; min-height: 36px; border: 0; background: none; color: var(--muted); font: inherit;
  text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.cc-more:hover { color: var(--text); }

.cc-dialog {
  /* margin: auto centres the modal; a CSS reset (Tailwind's preflight on the marketing pages) removes the browser's. */
  margin: auto; width: min(34rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 20px 22px 22px;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow); font-size: 0.95rem; line-height: 1.55;
}
.cc-dialog::backdrop { background: rgb(15 16 18 / 0.5); backdrop-filter: blur(2px); }
.cc-dialog > p { margin: 0 0 14px; color: var(--muted); }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cc-close {
  flex: none; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 999px; background: none;
  color: var(--muted); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.cc-close:hover { background: var(--surface-2); color: var(--text); }
.cc-cat { margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.cc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-cat h3 { margin: 0; font-size: 0.98rem; line-height: 1.35; letter-spacing: 0; }
.cc-cat label { cursor: pointer; }
.cc-cat p { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; }
.cc-locked { flex: none; color: var(--faint); font-size: 0.8rem; font-weight: 600; }
.cc-links { font-size: 0.9rem; }
.cc-dialog .cc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; width: auto; margin-top: 16px; }
/* Switch: a real checkbox (role="switch"); the off track keeps 3:1 against the card. */
.cc-switch {
  appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 999px;
  background: var(--faint); cursor: pointer; transition: background 140ms;
}
.cc-switch::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); transition: translate 140ms;
}
.cc-switch:checked { background: var(--accent-text); }
.cc-switch:checked::before { translate: 18px 0; }
.cc-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) {
  .cc-banner {
    left: 0; right: 0; bottom: 0; translate: none; width: auto; flex-direction: column; align-items: stretch; gap: 14px;
    border-radius: 18px 18px 0 0; border-bottom: 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  }
  .cc-actions { width: auto; }
  .cc-dialog .cc-actions .cc-btn { flex: 1 1 100%; }
}

/* Buttons: accept and reject look exactly alike (no nudging); only "save" in the dialog is filled. */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1em;
  border: 1px solid var(--border, #d9d6cf); border-radius: 999px; background: var(--surface, #fff); color: var(--text, #16181d);
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.cc-btn:hover { border-color: var(--muted, #545862); }
.cc-btn:focus-visible { outline: 2px solid var(--accent-text, #2340b5); outline-offset: 2px; }
.cc-btn-primary { border-color: transparent; background: var(--accent, #2340b5); color: var(--on-accent, #fff); }
.cc-btn-primary:hover { border-color: transparent; filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) {
  .cc-switch, .cc-switch::before { transition: none; }
}