/*
 * Consent banner and preference-centre styling.
 *
 * Its own file, loaded by BOTH lanes via partials/head.html: these rules used to
 * live in site.css, which only the markdown pages link — so on the landing page
 * the banner rendered as unstyled text and "Cookie settings" appeared to do
 * nothing at all.
 *
 * Self-contained on purpose: no shared tokens, so it looks right on the
 * Tailwind-driven landing page and the plain content pages alike.
 */
.consent {
  position: fixed; z-index: 60;
  /* Clear of the iPhone home indicator; falls back to 1rem where env() is unsupported. */
  inset: auto 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  inset-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
  max-width: 30rem; margin-left: auto;
}
.consent__panel {
  background: #201c17; border: 1px solid #37312a;
  border-radius: 12px; padding: 1rem;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
}
/* The preference centre is taller than the banner; on a short phone it must
   scroll inside itself rather than push its own buttons off screen. */
.consent__panel--prefs { max-height: min(80vh, 34rem); overflow-y: auto; }

.consent__title { margin: 0 0 0.5rem; font: 700 0.95rem/1.3 "Noto Sans", sans-serif; color: #efe9dd; }
.consent__text { margin: 0 0 0.85rem; font-size: 0.85rem; line-height: 1.5; color: #cfc6b5; }
.consent__text a { color: #efe9dd; }

.consent__cats { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.consent__cat { border: 1px solid #37312a; border-radius: 10px; padding: 0.75rem; }
.consent__cat-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.consent__cat-title { font: 600 0.85rem/1.2 "Noto Sans", sans-serif; color: #efe9dd; }
.consent__cat-body { margin: 0.5rem 0 0; font-size: 0.78rem; line-height: 1.5; color: #a99f8e; }
.consent__cat-detail { display: block; margin-top: 0.35rem; font-family: ui-monospace, monospace; font-size: 0.7rem; color: #8a8073; }
.consent__always { font: 600 0.7rem/1 "Noto Sans", sans-serif; color: #8a8073; text-transform: uppercase; letter-spacing: 0.04em; }

/* Switch: a real checkbox kept in the accessibility tree, visually replaced.
   Not `display:none` — that would take it out of tab order and out of reach of
   a screen reader, which is the whole point of offering the choice. */
.consent__switch { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.consent__switch input {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.consent__switch-track {
  flex: none; width: 40px; height: 24px; border-radius: 999px;
  background: #37312a; border: 1px solid #4a423a; position: relative;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.consent__switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #a99f8e;
  transition: transform 120ms ease-out, background 120ms ease-out;
}
.consent__switch input:checked + .consent__switch-track { background: #d75a2b; border-color: #d75a2b; }
.consent__switch input:checked + .consent__switch-track::after { transform: translateX(16px); background: #161310; }
.consent__switch input:disabled + .consent__switch-track { opacity: 0.65; }
.consent__switch input:disabled ~ .consent__cat-title { color: #a99f8e; }
.consent__switch input:focus-visible + .consent__switch-track { outline: 2px solid #d75a2b; outline-offset: 2px; }

.consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent__btn {
  flex: 1 1 8rem; min-height: 44px; border-radius: 999px; cursor: pointer;
  border: 1px solid #37312a; background: transparent; color: #efe9dd;
  padding: 0 0.75rem;
  font: 700 0.85rem/1 "Noto Sans", sans-serif;
}
.consent__btn--primary { background: #d75a2b; color: #161310; border-color: #d75a2b; }
.consent__btn:focus-visible { outline: 2px solid #d75a2b; outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-in 160ms ease-out; }
}

@keyframes consent-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}