/* ==========================================================================
   Cookie / analytics consent bar.

   A full-width bottom bar rather than a corner card, and deliberately not
   sharing the bottom-right corner with the assistant launcher and the
   back-to-top control — that corner already holds two floating circles plus
   an "Ask us anything" pill, and a consent choice is not something to bury
   in a stack fighting for the same 200px of screen. It gets the whole
   bottom edge and a z-index above everything else on the page: the choice
   has to be clearly visible before anything else is worth interacting with,
   which is the same reasoning every compliant implementation uses.

   Two buttons, weighted identically. Accept is not styled as the "real"
   button with Decline demoted to a grey link — that pattern (making refusal
   harder to see or click) is a dark pattern, and the whole point of doing
   this properly is that it is not one.
   ========================================================================== */

/* --consent-h is how much room the bar is taking off the bottom of the
   screen, and it is the single number every other bottom-anchored control
   reads to get out of the way: the assistant launcher and its pill, the
   back-to-top button, the mobile contact bar and the SYS readout all add it
   to their own offset.

   It is 0 whenever the bar is not up, so the same expression is correct in
   both states and there is no second set of rules for "banner showing" to
   keep in step. consent.js measures the real rendered height and writes it
   here — measured rather than hard-coded because the bar wraps to two and
   then three lines as the screen narrows, and a guessed constant would be
   wrong at exactly the widths where the overlap is worst. */
:root{ --consent-h: 0px; }

.consent-bar{
  position:fixed; inset:auto 0 0 0; z-index:200;
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2.4vw,28px);
  padding:18px clamp(16px,4vw,40px);
  background:var(--panel); border-top:1px solid var(--line);
  box-shadow:0 -18px 44px -24px rgba(0,0,0,.55);
  transform:translateY(100%); transition:transform .5s var(--ease-out);
}
.consent-bar.in{ transform:none; }
.consent-bar[hidden]{ display:none; }

.consent-copy{ flex:1 1 360px; min-width:0; }
.consent-copy p{
  margin:0; font-size:var(--fs-sm); line-height:1.65; color:var(--muted);
  max-width:68ch;
}
/* The hit area, not the type size. This link sits inside a sentence, so it
   measured 70x17 -- under WCAG 2.2's 24x24 minimum. Inline links in a block
   of text are explicitly EXEMPT from that rule, so this is not a failure;
   it is still a 17px-tall target for a thumb, which is the actual problem.

   Vertical padding on an INLINE box grows the hit area without touching the
   line box, so the paragraph does not reflow by a pixel: 70x17 becomes
   70x29. The negative margin cancels the horizontal padding so the
   underline still starts and ends on the words. */
.consent-copy a{
  color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  transition:color .3s var(--ease-out);
  padding:6px 3px; margin:-6px -3px;
}
@media (hover:hover){ .consent-copy a:hover{ color:var(--accent); } }

.consent-actions{ flex:0 0 auto; display:flex; gap:10px; }
/* Equal visual weight, deliberately — see the file header. Both are 44px
   targets and both take the same border treatment; only the fill differs,
   and that difference reads as "primary vs secondary" without reading as
   "correct vs discouraged". */
.consent-btn{
  min-height:44px; padding:0 20px; border-radius:2px; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  transition:filter .3s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.consent-accept{ background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); }
@media (hover:hover){ .consent-accept:hover{ filter:brightness(1.08); } }
.consent-decline{ background:none; color:var(--muted); border:1px solid var(--line); }
@media (hover:hover){ .consent-decline:hover{ color:var(--ink); border-color:var(--ink); } }
.consent-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:640px){
  .consent-bar{ padding:16px; gap:14px; }
  .consent-actions{ flex:1 1 100%; }
  .consent-btn{ flex:1 1 0; }
}

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