/* CEVO homepage · cookie card (js/cookie-settings.js, spec brand3/COOKIE-CARD.md). Scoped under .ck; reads kit/tokens.css.
   A small mist card in the corner, never a strip or a centred wall: phones = a compact sheet at the bottom inside the
   16px gutter; from 768px = 360px wide, bottom right, 24px from the edges. 20px padding at every width (spec). One short sentence + Details, then one row:
   Reject (quiet, left) and Accept (solid pine, right). Details opens the full text in a scroll box above the buttons,
   which stay visible. The page reserves the card's height (--ck-h) inside the footer, so everything can be scrolled
   clear of it. The US Cookie settings panel (switches + Done) uses the same card and the same corner; each switch's
   description folds behind its own Details toggle there. */

.ck[hidden] { display: none; }
html.ck-open .site-foot { padding-bottom: var(--ck-h, 0px); }   /* the reserve sits inside the dark footer */

.ck {
  --ck-ink: var(--ink-dark);
  --ck-ink-2: rgba(17, 22, 20, .68);           /* 5.9:1 on the mist card */
  --ck-line: rgba(17, 22, 20, .12);
  --ck-line-2: rgba(17, 22, 20, .26);
  --ck-accept: var(--pine, #244839);           /* white text on it: 10.4:1 */
  --ck-accept-hover: #1c3b2e;
  --ck-accept-active: #142d23;
  --ck-ease: cubic-bezier(.2, 0, 0, 1);
  position: fixed; z-index: 60;
  left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  color: var(--ck-ink); outline: none;
  font-family: "Switzer", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.004em;
}
.ck *, .ck *::before, .ck *::after { box-sizing: border-box; }
.ck:focus-visible .ck__in { box-shadow: 0 0 0 2px var(--mist), 0 0 0 4px var(--focus-dark), 0 18px 40px -18px rgba(17, 22, 20, .42); }

.ck__in {
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 20px; border-radius: 16px;
  background: var(--mist);
  box-shadow: inset 0 0 0 1px var(--ck-line), 0 18px 40px -18px rgba(17, 22, 20, .42), 0 2px 6px -2px rgba(17, 22, 20, .08);
}
.ck__in.is-clipped {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
}
.ck [hidden] { display: none !important; }

.ck__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 440; letter-spacing: -.01em; color: var(--ck-ink); }

/* the short sentence + the inline Details toggle */
.ck__lead { display: flex; flex-direction: column; gap: 8px; }
.ck__short { margin: 0; font-size: 14px; line-height: 20px; font-weight: 390; color: var(--ck-ink-2); text-wrap: pretty; }
.ck__more {
  position: relative; display: inline; padding: 0; margin: 0; border: 0; border-radius: 4px; background: none;
  font: inherit; font-weight: 460; color: var(--ck-ink); white-space: nowrap; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: var(--ck-line-2);
  transition: text-decoration-color 160ms var(--ck-ease);
  -webkit-tap-highlight-color: transparent;
}
.ck__more::after { content: ""; position: absolute; inset: -12px -8px; }   /* 44px tall touch target around the 20px line */
.ck__more:focus-visible { outline: 2px solid var(--focus-dark); outline-offset: 2px; }
.ck__text { margin: 0; font-size: 13px; line-height: 20px; font-weight: 390; letter-spacing: .002em; color: var(--ck-ink-2); text-wrap: pretty; }
.ck__gpc { color: var(--ck-ink); }
.ck__gpc--us { margin: 0; }
.ck__current { margin: 0; font-size: 13px; line-height: 20px; font-weight: 440; color: var(--ck-ink); }

/* Details: the full legal text (and the counter switch) in a scroll box above the buttons */
.ck__details {
  display: flex; flex-direction: column; gap: 16px; flex-shrink: 1; min-height: 0;
  max-height: 40vh; max-height: 40dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 12px 14px; border-radius: 8px;
  background: rgba(17, 22, 20, .035); box-shadow: inset 0 0 0 1px var(--ck-line);
  outline: none;
}
.ck__details:focus-visible { box-shadow: inset 0 0 0 1px var(--ck-line), 0 0 0 2px var(--focus-dark); }
.ck__details.is-clipped {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}

/* switch rows: the label names the switch (and toggles it), the body describes it */
.ck__row { display: flex; align-items: flex-start; gap: 16px; padding-top: 16px; border-top: 1px solid var(--ck-line); }
.ck--us .ck__ads { padding-top: 0; border-top: 0; }
.ck__row-text { flex: 1 1 auto; min-width: 0; }
.ck__row-h { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 4px; }
.ck__row-l { display: block; font-size: 15px; line-height: 20px; font-weight: 440; color: var(--ck-ink); cursor: pointer; }
.ck__row-more { font-size: 13px; line-height: 20px; font-weight: 440; }   /* US panel: folds the row's description */
.ck__row-b { margin: 4px 0 0; font-size: 13px; line-height: 20px; font-weight: 390; color: var(--ck-ink-2); text-wrap: pretty; }
.ck-sw {
  position: relative; flex: none; width: 44px; height: 26px; margin-top: -2px;
  padding: 0; border: 0; border-radius: 9999px; cursor: pointer;
  background: rgba(17, 22, 20, .5);            /* off: track 3.4:1 on the card, white knob 3.6:1 on the track */
  transition: background-color 160ms var(--ck-ease);
  -webkit-tap-highlight-color: transparent;
}
.ck-sw::before { content: ""; position: absolute; inset: -9px -4px; }   /* 44px touch target around the 26px track */
.ck-sw__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(17, 22, 20, .24);
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
}
.ck-sw[aria-checked="true"] { background: var(--pine); }
.ck-sw[aria-checked="true"] .ck-sw__knob { transform: translateX(18px); }
/* under GPC the switches stay focusable (aria-disabled, not disabled) so a keyboard user can reach their state */
.ck-sw[aria-disabled="true"] { cursor: not-allowed; opacity: .7; }
.ck-sw:focus-visible { outline: 2px solid var(--focus-dark); outline-offset: 2px; }

/* one row: Reject (quiet, left) and Accept (solid pine, right), equal width, 44px */
.ck__actions { display: flex; gap: 8px; flex-shrink: 0; }
.ck__btn {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px;
  border: 0; border-radius: 9999px; background: transparent;
  font: inherit; font-size: 15px; line-height: 20px; font-weight: 460; text-align: center; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ck-ease), box-shadow 160ms var(--ck-ease), transform 120ms var(--ck-ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ck__btn--quiet { color: var(--ck-ink); box-shadow: inset 0 0 0 1px var(--ck-line-2); }
.ck__btn--quiet:active { background: rgba(17, 22, 20, .08); }
.ck__btn--accept { color: #fff; background: var(--ck-accept); }
.ck__btn--accept:active { background: var(--ck-accept-active); }
.ck__btn:active { transform: scale(.98); }
.ck__btn:focus-visible { outline: 2px solid var(--focus-dark); outline-offset: 2px; }

/* "Current choice" + Done on one line (card); Done alone, right-aligned, as the US panel's last row */
.ck__state { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ck__state .ck__current { flex: 1 1 auto; min-width: 0; }
.ck--us .ck__state { justify-content: flex-end; }
/* Done: a quiet text button that closes and writes nothing */
.ck__done {
  align-self: flex-end; margin: -4px -12px -6px 0; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 440; color: var(--ck-ink); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  -webkit-tap-highlight-color: transparent;
}
.ck__done:focus-visible { outline: 2px solid var(--focus-dark); outline-offset: 2px; }
/* on the card it sits on the 20px "Current choice" line: no negative margins, the 44px target drawn around it */
.ck:not(.ck--us) .ck__done { position: relative; flex: none; align-self: center; margin: 0; min-height: 20px; padding: 0; font-size: 13px; }   /* the Current line's size */
.ck:not(.ck--us) .ck__done::after { content: ""; position: absolute; inset: -12px -10px; }

@media (hover: hover) {
  .ck__more:hover { text-decoration-color: currentColor; }
  .ck__btn--quiet:hover { background: rgba(17, 22, 20, .05); box-shadow: inset 0 0 0 1px rgba(17, 22, 20, .4); }
  .ck__btn--accept:hover { background: var(--ck-accept-hover); }
  .ck__btn--accept:active { background: var(--ck-accept-active); }
  .ck__done:hover { background: rgba(17, 22, 20, .05); }
  .ck:not(.ck--us) .ck__done:hover { background: none; text-decoration-thickness: 2px; }
}

/* phones: label and switch on one line, the body full width underneath */
@media (max-width: 767px) {
  .ck__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 0; align-items: start; }
  .ck__row-text { display: contents; }
  .ck__row-h { grid-column: 1; grid-row: 1; align-self: center; }
  .ck-sw { grid-column: 2; grid-row: 1; margin-top: 0; }
  .ck__row-b { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 359px) {
  .ck__row { column-gap: 12px; }
  .ck__details { padding: 12px; }
}

@media (min-width: 768px) {
  .ck { left: auto; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 360px; }
  .ck__in { gap: 14px; max-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) { .ck-sw, .ck-sw__knob, .ck__btn, .ck__more { transition: none; } .ck__btn:active { transform: none; } }