/* noent.app: the cookie banner, and the controls on the privacy page.
   Ported from 11 Plus Blocks' css/consent.css (deploy 24ac706) onto this site's tokens.

   **A bar fixed to the bottom of the screen that slides up** (Dean, 16 Sep 2026, for 11PB). It
   sits under the sticky header (50), so the phone menu still covers it. While it is up the body
   gets padding the height of the bar (analytics.js measures it), or the end of the page could
   never be scrolled out from under it.

   **Accept and Reject look identical.** Rejecting must be as easy as accepting, and a pale
   "reject" beside a bold "accept" is the pattern the ICO names as not a free choice. */

.consent{position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:rgba(12,16,22,.97);border-top:1px solid var(--edge);box-shadow:0 -12px 40px rgba(0,0,0,.5);
  color:var(--soft);font-family:var(--sans);
  transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.consent.is-in{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.consent{transition:none}}

body.has-consent{padding-bottom:var(--consent-height,0px)}

.consent__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 32px;align-items:center;max-width:var(--wrap);margin:0 auto;
  padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom))}
/* Side by side once there is room, so the bar stays a bar rather than a sheet. */
@media (min-width:960px){
  .consent__inner{grid-template-columns:minmax(0,1fr) auto}
  .consent__actions{max-width:30rem;justify-content:center}
  .consent__actions .consent__link{flex-basis:100%;text-align:center}
}

.consent__title{margin:0 0 4px;font-size:16px;color:var(--white)}
.consent p{max-width:46rem;margin:0;font-size:15px;line-height:1.5}
.consent p + p{margin-top:4px}

.consent__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}

.consent__btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:.7em 1.25em;border:0;border-radius:99px;background:var(--white);color:var(--ground);
  font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.2;text-align:center;white-space:normal;max-width:100%;cursor:pointer;transition:filter .15s}
.consent__btn:hover{filter:brightness(.9)}
.consent__link{color:var(--cyan);font-size:14px;font-weight:600}
.consent__btn:focus-visible,.consent__link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* On a narrow screen the two answers share a row at equal width when both labels fit on one line,
   and stack at full width when they do not. Never a wrapped label on one and not the other. */
@media (max-width:640px){
  .consent__btn{flex:1 1 12rem;white-space:nowrap}
  .consent__link{flex-basis:100%}
}

/* --- The privacy page --- */
.consent-controls{margin:18px 0;padding:16px 20px;border-radius:var(--r);background:var(--ground2);border:1px solid var(--edge)}
.consent-controls p{margin:0 0 12px;font-weight:700;color:var(--text)}
.consent-controls .consent__btn[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ground2),0 0 0 5px var(--cyan)}