/* design-system/css/consent.css
   The consent banner. Paired with design-system/js/consent.js, which is the
   only thing that creates .ck-bar.

   Charcoal card, gold accept. Gold is the single highlight here, so the banner
   never pushes a page over the two-highlight rule no matter what it sits on.

   Bottom, not top: the pre-launch countdown already owns the top of every page
   and two stacked bars would leave a phone with almost no content. It also does
   not block the page, because a wall in front of the content pressures people
   into clicking yes to get past it, which is not consent. */

/* VISIBLE IS THE DEFAULT STATE, and that is the whole trick. The slide-in is an
   enhancement layered on top with .ck-enter, which JS removes immediately.

   The obvious way round (hidden by default, add a class to reveal) makes the
   banner's visibility depend on a transition completing, and transitions are
   driven by the rendering lifecycle: in a background tab they do not run, so
   the banner sat at opacity 0 and could never be answered. Verified, twice.
   This way every failure mode (background tab, transitions unsupported, CSS
   half-applied, JS timing) lands on "visible immediately" rather than
   "invisible forever". A consent gate must fail loud, not silent. */
.ck-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;   /* over the modal backdrop (200) */
  padding: 0 20px 20px;
  pointer-events: none;                 /* only the card takes clicks */
  transform: none;
  opacity: 1;
  transition: transform 0.26s ease, opacity 0.26s ease;
}
/* Start state, removed on the next tick, and end state on the way out. */
.ck-bar.ck-enter,
.ck-bar.ck-leave { transform: translateY(14px); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ck-bar, .ck-bar.ck-enter { transition: none; transform: none; opacity: 1; }
  .ck-bar.ck-leave { transition: none; opacity: 0; }
}

.ck-in {
  pointer-events: auto;
  width: 100%; max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  background: var(--charcoal); color: rgba(255,255,255,0.86);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 12px 40px rgba(26,28,32,0.34);
}

.ck-copy b {
  display: block;
  font-family: var(--font-display); font-weight: 800; font-size: 15.5px;
  color: #fff; margin-bottom: 4px;
}
.ck-copy p { font-size: 13.5px; line-height: 1.5; margin: 0; }
.ck-copy a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ck-copy a:hover { color: #fff; }

/* Both buttons are buttons, same height, same weight, side by side. Reject has
   to be as easy as accept: a text link or a greyed-out "no" is a dark pattern
   and is exactly what regulators look for. */
.ck-btns { display: flex; gap: 10px; flex-shrink: 0; }
.ck-btn {
  height: 42px; padding: 0 18px; border-radius: 11px;
  font-family: inherit; font-size: 14px; font-weight: 800;
  cursor: pointer; white-space: nowrap;
  transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
}
.ck-btn:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px; }

.ck-no {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.34);
}
.ck-no:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.5); }
.ck-no:active { background: rgba(255,255,255,0.05); }

.ck-yes {
  border: none; color: #4A3413;
  background: linear-gradient(180deg, #E0BE86, #C99A56);
  box-shadow: inset 0 -2px 0 #B98A4E, 0 3px 10px rgba(210,165,107,0.34);
}
.ck-yes:hover { background: linear-gradient(180deg, #E7C892, #D2A56B); box-shadow: inset 0 -2px 0 #B98A4E, 0 6px 18px rgba(210,165,107,0.46); }
.ck-yes:active { background: linear-gradient(180deg, #D9B276, #BE8F4C); box-shadow: inset 0 -1px 0 #B98A4E, 0 1px 4px rgba(210,165,107,0.3); }

@media (max-width: 720px) {
  .ck-bar { padding: 0 12px 12px; }
  .ck-in { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; }
  /* Full width and equal on a phone, so neither is the easier target. */
  .ck-btns { gap: 8px; }
  .ck-btn { flex: 1; }
}