/* Cookie consent banner.
   Self-contained on purpose: this loads on checkout.html and success.html,
   which have their own stylesheets and never load tokens.css. The values
   below mirror the tokens (--main, --accent, --neutral-*) rather than
   referencing them, so the banner looks right wherever it is dropped in.
   Keep them in step with css/tokens.css if the palette moves. */

.consent {
  --consent-ink: #091A28;
  --consent-ink-2: #22313D;
  --consent-body: #535F69;
  --consent-line: #CED1D4;
  --consent-tint: #EEF0F2;
  --consent-white: #FFFFFF;
  --consent-accent: #CA3D21;
  --consent-accent-hover: #AC3319;

  position: fixed;
  z-index: 1000; /* above the sticky header (50) */
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  /* dvh, not vh: on a phone 100vh is the viewport with the browser chrome
     retracted, so while the URL bar is showing the banner could be taller
     than the area you can actually see. With the categories expanded that
     put "Save choices" below the fold on a 640px-tall viewport — you could
     set the toggles but not reach the button that stores them. dvh tracks
     the visible viewport, so the panel is bounded by what is on screen and
     the overflow below can always scroll to the end of it. vh first as the
     fallback for browsers that don't know dvh. */
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  /* the banner is its own scroll area; don't chain to the page behind it */
  overscroll-behavior: contain;
  padding: 24px 20px;
  background: var(--consent-white);
  border-top: 2px solid var(--consent-ink);
  font-family: 'Spline Sans', 'Roboto Mono', ui-sans-serif, system-ui, sans-serif;
  color: var(--consent-body);
  /* Kept out of the layout and out of the a11y tree until opened, so it
     can't be tabbed into or read out while hidden. */
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
}
.consent.is-open {
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
.consent:focus {
  outline: none; /* focused programmatically on open; the border is the cue */
}

@media (prefers-reduced-motion: reduce) {
  .consent, .consent.is-open { transition: none; }
}

.consent__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 900px) {
  .consent__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
}

/* The banner is a third of a phone screen, and most of that is the
   disclosure itself, which stays as written — it is what makes the consent
   informed. This is only the space around it, plus room for the home
   indicator so the last control isn't sat under it. */
@media (max-width: 639px) {
  .consent { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
  .consent__inner { gap: 12px; }
}

.consent__main { max-width: 68ch; }

.consent__title {
  margin: 0 0 6px 0;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--consent-ink-2);
}

.consent__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.consent__text a {
  color: var(--consent-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent__text a:hover { color: var(--consent-accent-hover); }

/* ------------------------------- buttons ------------------------------- */

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

/* Reject and Accept share one style. Only "Accept all" is filled, and
   "Reject optional" is an outlined button of identical size — refusing has
   to be no harder than consenting. "Choose categories" is the quiet one
   because it leads to more UI rather than settling the question. */
.consent__btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 20px;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid var(--consent-ink);
  background: var(--consent-white);
  color: var(--consent-ink);
  transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.consent__btn:hover { background: var(--consent-tint); }
.consent__btn:focus-visible {
  outline: 2px solid var(--consent-ink);
  outline-offset: 2px;
}

.consent__btn--primary {
  background: var(--consent-ink);
  border-color: var(--consent-ink);
  color: var(--consent-white);
}
.consent__btn--primary:hover {
  background: var(--consent-ink-2);
  border-color: var(--consent-ink-2);
}

.consent__btn--quiet {
  border-color: transparent;
  color: var(--consent-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent__btn--quiet:hover {
  background: transparent;
  color: var(--consent-ink);
}

/* Phone layout for the actions row.
   flex-wrap was quietly undoing the rule this file and js/consent.js both
   exist to honour. Below roughly 470px the three buttons stop fitting on
   one line, so "Choose categories" and "Reject optional" took the first
   row and "Accept all" wrapped onto the second alone — where flex:1 1 auto
   stretched it to the full width, still filled dark, while reject stayed
   small and outlined above it. Measured, accept came out 2.2x reject's
   width at every phone size: 320 against 143 at 360px, 350/158 at 390px,
   408/187 at 448px. Above ~480px it is fine (reject is in fact the wider
   of the two), which is why this is invisible from a desktop browser.

   Explicit placement rather than wrapping: the quiet button takes a row of
   its own — first, so visual order still matches DOM and tab order — and
   reject and accept share the next at exactly half each. That cannot drift
   with font metrics the way the wrap boundary can, which is why it is
   pinned to the project's phone breakpoint instead of the measured 470px.
   The cost is one extra button row between 480 and 639px, where the three
   did previously fit on a single line. No change in total height on a
   phone: it was already two rows. */
@media (max-width: 639px) {
  .consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .consent__btn--quiet { grid-column: 1 / -1; }
}

/* ------------------------------ categories ----------------------------- */

.consent__options {
  max-width: 1200px;
  margin: 20px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--consent-line);
}
/* Must come after any rule that sets display on this element, or the
   [hidden] attribute stops working. */
.consent__options[hidden] { display: none; }

.consent__cat + .consent__cat,
.consent__cat--fixed + .consent__cat {
  margin-top: 16px;
}

.consent__cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.consent__cat--fixed .consent__cat-head { cursor: default; }

.consent__cat-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--consent-ink-2);
}

.consent__cat-state {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--consent-body);
}

.consent__check {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--consent-ink);
  cursor: pointer;
}

.consent__cat-desc {
  margin: 4px 0 0 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 68ch;
}
.consent__cat .consent__cat-desc { margin-left: 30px; }
.consent__cat--fixed .consent__cat-desc { margin-left: 0; }

.consent__save {
  margin-top: 20px;
  flex: 0 0 auto;
}