/**
 * Cookie consent banner.
 *
 * Loaded on every page by functions/_middleware.js alongside consent.js. It is deliberately a
 * separate stylesheet rather than part of components.css: the banner is a legal surface with its
 * own lifecycle, and it must render correctly even if a page forgets one of the other stylesheets.
 *
 * Every value is a token from tokens.css. No new hues, and lime is used for exactly one filled
 * button, per DESIGN-SYSTEM's rule that a card carries a single filled element.
 *
 * Reject and Accept are the SAME size and weight. Under GDPR consent must be as easy to refuse as
 * to give, and a quiet "reject" beside a loud "accept" is the pattern regulators fine. The visual
 * difference between them is fill only, which is how the rest of this site distinguishes a primary
 * action from a secondary one.
 */

.consent-bar {
  /* A small card in the bottom-left corner, NOT a full-width wall.
     ------------------------------------------------------------------------------------------
     It shipped as a full-bleed bar pinned across the viewport, and with the detail panel open it
     covered most of the screen. KING JOE: "cookie banner is too big and disruptive ... Just need a
     flat banner in the bottom left ... small thing not full page disrupting the fun."

     He is right about more than the aesthetics. The board is the product and the first thing a
     visitor should be able to do is read it. A consent bar that occupies the bottom third makes
     the site look like every other cookie-walled directory, on a page whose whole pitch is that
     nothing is hidden. Corner-anchored also means it never covers the leaderboard rows, which sit
     centre-page.

     It stays a real blocking gate: nothing is stored until a choice is made. Small is a layout
     decision, not a consent one. */
  position: fixed;
  left: 16px;
  right: auto;
  bottom: 16px;
  z-index: 60;
  width: min(26rem, calc(100vw - 32px));
  background: var(--inset, #141416);
  border: 1px solid var(--border-loud);
  border-radius: 12px;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .9);
  animation: consent-rise .22s ease-out;
}

@keyframes consent-rise {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* The banner appears at first paint and animating it under someone who set reduce-motion is
   exactly the case that setting exists for. */
@media (prefers-reduced-motion: reduce) {
  .consent-bar { animation: none; }
}

.consent-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 15px;
}

.consent-copy { min-width: 0; }

.consent-text {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--text-muted);
  margin: 0;
  text-wrap: pretty;
}

.consent-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Wraps rather than shrinks: at 390px three buttons cannot share a row without their labels
   truncating, and a truncated "Reject all" is a consent problem, not a layout one. */
.consent-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.consent-actions .btn { flex: 1 1 auto; white-space: nowrap; }

.consent-details {
  border-top: 1px solid var(--border);
  max-width: 68rem;
  margin: 0 auto;
  padding: 14px var(--gutter, 16px) 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.consent-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font: 400 13px/1.45 var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
}

.consent-row b { color: var(--text); font-weight: 600; }

.consent-row input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

/* Visibly not a choice, because it genuinely is not one: the sign-in cookie is strictly necessary
   and exempt. Showing it as a togglable option we then ignore would be worse than showing it
   locked. */
.consent-row.is-locked { opacity: .72; cursor: default; }

.consent-details-actions { display: flex; }
.consent-details-actions .btn { flex: 1 1 auto; }

@media (min-width: 640px) {
  .consent-details-actions .btn { flex: 0 0 auto; }
}

/* "Choose" is a text button, not a third filled control. Keeping it visually quieter than Reject
   and Accept is what makes the bar read as two options rather than a settings panel, but it is a
   real <button> with a real hit area, not a link pretending to be one. */
.consent-link {
  background: none;
  border: 0;
  padding: 12px 6px;
  font: 600 13.5px/1 var(--font-sans);
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-loud);
  flex: 0 0 auto;
}

.consent-link:hover { color: var(--text); text-decoration-color: var(--text-dim); }

/* One sentence now, so the bar is a single row on desktop and two on mobile, never a paragraph. */
.consent-inner { padding: 13px var(--gutter, 16px); }
/* NO flex sizing here.
   `.consent-inner` is now flex-direction: column, and in a column container `flex-basis` sets
   HEIGHT, not width. This carried `flex: 1 1 20rem` from when the bar was a horizontal row, which
   in the column layout meant a 320px-tall basis for a single sentence. That, not the detail panel,
   was why the "small corner card" measured 404px. Caught by walking the box tree, not by reading
   the file: the panel was correctly display:none while .consent-text alone was h=320. */
.consent-row span b { display: inline; margin-right: 5px; }

.consent-actions .consent-link { margin-right: auto; }

.consent-actions .btn {
  flex: 0 0 auto;
  font-size: 13px;
  padding: 9px 14px;
}

/* The detail panel lives inside the same small card now, so it needs its own scroll ceiling
   rather than growing the card up the screen. */
.consent-details {
  border-top: 1px solid var(--border);
  margin: 0;
  padding: 12px 15px 14px;
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
}

.consent-row { font-size: 12.75px; }

/* Slide up from the corner rather than the full width of the screen. */
@keyframes consent-rise {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* [hidden] must actually hide.
   ------------------------------------------------------------------------------------------------
   `.consent-details` sets `display: flex`, and an AUTHOR rule beats the user-agent stylesheet's
   `[hidden] { display: none }`. So the detail panel rendered on first paint even though the markup
   said hidden, and the "small corner card" was 584px tall, 69% of a 390x844 viewport. Measured, not
   guessed: the element box came back y=244 h=584.

   This is the classic display-vs-hidden collision and it is worth an explicit rule rather than
   switching the panel to a class toggle, because `hidden` is the correct semantic for "not
   currently available" and screen readers honour it. */
.consent-details[hidden] { display: none; }