/* =============================================================================
   WHITELY — cookie consent UI

   Two surfaces: a bottom sheet that asks, and a dialog that lets the visitor
   decide category by category.

   The layout rule that matters legally: "Accept all" and "Reject all" are the
   same element, the same size, the same weight, side by side. A refusal that
   is visually quieter than an acceptance is not a free choice, and regulators
   read it that way. Nothing here may be changed to make one look cheaper.
   ========================================================================== */

/* ---------- the bottom sheet -------------------------------------------- */
.cc{
  position:fixed; z-index:9000;
  left:var(--gutter); right:var(--gutter); bottom:clamp(.9rem,2vw,1.6rem);
  max-width:640px;
  background:var(--bone);
  color:var(--ink);
  border:1px solid var(--ink);
  box-shadow:0 24px 60px rgba(10,10,10,.22);
  padding:clamp(1.15rem,2.2vw,1.6rem);
  display:flex; flex-direction:column; gap:1rem;
  animation:cc-in .5s var(--ease-out) both;
}
@media (prefers-reduced-motion:reduce){ .cc{ animation:none; } }
@keyframes cc-in{ from{ opacity:0; transform:translateY(18px); } }

.cc__label{
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
}
.cc__title{
  font-family:var(--f-display); font-size:1.15rem; font-weight:500;
  letter-spacing:-.02em; line-height:1.2;
}
.cc__text{ font-size:.875rem; line-height:1.55; color:var(--ink-60); max-width:52ch; }
.cc__text a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.cc__text a:hover{ color:var(--ember-ink); }

.cc__actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

/* accept and reject are deliberately identical — see the note at the top */
.cc__btn{
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 1.35rem;
  background:var(--ink); color:var(--bone);
  border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease);
  flex:1 1 auto; min-width:9.5rem; text-align:center;
}
.cc__btn:hover{ background:var(--ember); border-color:var(--ember); color:var(--bone); }

/* the third option is a link, not a competing button: it opens the choices,
   it does not stand in for either answer */
.cc__more{
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-60); text-decoration:underline; text-underline-offset:4px;
  padding:.4rem 0; flex:0 0 auto;
}
.cc__more:hover{ color:var(--ink); }

@media (max-width:520px){
  .cc{ left:0; right:0; bottom:0; max-width:none; border-inline:0; border-bottom:0; }
  .cc__btn{ flex:1 1 100%; }
}

/* ---------- the preferences dialog --------------------------------------- */
.ccm{
  position:fixed; inset:0; z-index:9100;
  display:grid; place-items:end center;
  background:rgba(10,10,10,.44);
  padding:0;
  animation:cc-fade .3s var(--ease-out) both;
}
@media (prefers-reduced-motion:reduce){ .ccm{ animation:none; } }
@keyframes cc-fade{ from{ opacity:0; } }

.ccm__panel{
  width:min(680px,100%);
  max-height:min(86svh,760px);
  background:var(--bone); color:var(--ink);
  border:1px solid var(--ink); border-bottom:0;
  display:flex; flex-direction:column;
  animation:cc-in .45s var(--ease-out) both;
}
@media (prefers-reduced-motion:reduce){ .ccm__panel{ animation:none; } }
@media (min-width:720px){
  .ccm{ place-items:center; padding:2rem; }
  .ccm__panel{ border-bottom:1px solid var(--ink); }
}

.ccm__hd{
  padding:clamp(1.2rem,2.4vw,1.7rem);
  border-bottom:1px solid var(--rule);
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.ccm__hd h2{ font-size:1.25rem; letter-spacing:-.02em; }
.ccm__x{
  font-family:var(--f-mono); font-size:1rem; line-height:1;
  color:var(--ink-42); padding:.35rem; flex:none;
}
.ccm__x:hover{ color:var(--ink); }

.ccm__body{ overflow-y:auto; padding:0 clamp(1.2rem,2.4vw,1.7rem); }
.ccm__intro{
  font-size:.875rem; line-height:1.6; color:var(--ink-60);
  padding-block:1.1rem; border-bottom:1px solid var(--rule-soft);
}
.ccm__intro a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.ccm__row{
  display:grid; grid-template-columns:1fr auto; gap:1rem 1.2rem;
  align-items:start;
  padding-block:1.15rem;
  border-bottom:1px solid var(--rule-soft);
}
.ccm__row:last-child{ border-bottom:0; }
.ccm__row h3{
  font-size:.9375rem; font-weight:500; letter-spacing:-.01em;
  text-transform:uppercase; margin-bottom:.35rem;
}
.ccm__row p{ font-size:.8125rem; line-height:1.55; color:var(--ink-60); max-width:46ch; }
.ccm__always{
  font-family:var(--f-mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
  white-space:nowrap; padding-top:.2rem;
}

/* switch — a real checkbox underneath, so keyboard and screen readers work */
.sw{ position:relative; display:inline-flex; flex:none; padding-top:.1rem; }
.sw input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.sw__track{
  width:46px; height:26px; border-radius:13px;
  background:var(--bone-3); box-shadow:inset 0 0 0 1px var(--rule);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
  display:block; position:relative;
}
.sw__track::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:var(--bone); box-shadow:0 1px 3px rgba(10,10,10,.3);
  transition:transform .3s var(--ease);
}
.sw input:checked + .sw__track{ background:var(--ember); box-shadow:inset 0 0 0 1px var(--ember); }
.sw input:checked + .sw__track::after{ transform:translateX(20px); }
.sw input:focus-visible + .sw__track{ outline:2px solid var(--ember); outline-offset:3px; }

.ccm__ft{
  padding:clamp(1.1rem,2.2vw,1.5rem);
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.ccm__ft .cc__btn{ flex:1 1 8rem; }
.cc__btn--quiet{
  background:transparent; color:var(--ink);
  box-shadow:none; border-color:var(--rule);
}
.cc__btn--quiet:hover{ background:var(--ink); border-color:var(--ink); color:var(--bone); }

/* the page must not scroll behind an open dialog */
html.cc-locked, html.cc-locked body{ overflow:hidden; }

/* ---------- footer / inline "change your choice" trigger ----------------- */
.cc-link{
  background:none; border:0; padding:0;
  font:inherit; color:inherit; cursor:pointer;
  text-align:left;
}

/* the footer trigger is a <button> so it announces as an action, but it has to
   sit in a column of links without looking like the odd one out */
.foot__col .cc-link{
  font-size:.8125rem; color:var(--on-dark-60);
  transition:color .35s var(--ease);
}
.foot__col .cc-link:hover{ color:var(--on-dark); }