/* consent.css — the cookie notice, in the site's own type and colour.

   Loaded after styles.css on every emitted page. It defines no colours of its
   own: every value below is either a token from styles.css :root or an alpha
   of one that styles.css already uses (rgba(17,24,39,…) = --ink, rgba(20,74,124,…)
   = --relationship-blue). No new fonts. No motion beyond the same 0.18s ease
   the site's pill buttons already use.

   Deliberately a quiet strip at the foot of the page: no overlay, no dimming,
   nothing trapped. You can read the page around it and ignore it. */

.consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -1px 18px rgba(17, 24, 39, 0.06);
}

.consent[hidden] {
  display: none;
}

/* I9 — the strip is `position: fixed`, so while it is open it sits ON TOP of
   whatever the page ends with: at 1440 and at 375 that was the footer legal
   row, Privacy/Cookies/Accessibility included. A cookie notice that covers the
   privacy link is the one occlusion you cannot ship.

   The height is measured by analytics.js (and re-measured on resize) rather
   than guessed here, because the strip wraps to two and three lines as the
   viewport narrows — a hardcoded value is wrong at every width but one. The
   0px fallback keeps this inert if the custom property never lands.

   F7 — the reserve sits on the FOOTER, not on `body`. Same geometry, but the
   space it makes is painted `--paper` by the footer band it belongs to
   instead of `--bg` white by the page. On `body` it read as a white shelf
   under the footer, which is most obvious on a short page in a tall window
   (measured: 258px of white between the footer band and the notice on
   /404 at 1440x1200). Every emitted page carries `.site-footer` — the
   analytics harness holds that, because if one ever did not, the reserve
   would silently vanish and the notice would cover the legal row again. */
html.pm-consent-open .site-footer {
  padding-bottom: var(--pm-banner-h, 0px);
}

/* …and the canvas below the document takes the same token while the notice is
   open. `body` paints `--bg` white across its own box only; anything past the
   end of a short document is painted by the ROOT, which normally inherits
   body's white. Giving the root `--paper` for the duration means a page that
   does not fill the window ends in one continuous band from the footer rule
   down to and behind the notice, instead of a white shelf with the notice
   floating under it. Reverts the instant the class comes off. */
html.pm-consent-open {
  background: var(--paper);
}

.consent-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

/* 92ch, not the site's usual 62–68ch: at 1440 a narrower measure orphaned
   "cookies note." onto a third line with the row half empty beside it. */
.consent-text {
  flex: 1 1 34rem;
  max-width: 92ch;
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}

.consent-text[hidden] {
  display: none;
}

.consent-text a {
  color: var(--relationship-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Both choices carry the same weight — the site does not lean on you. */
.consent-button {
  min-height: 38px;
  padding: 8px 20px;
  border: 1px solid rgba(20, 74, 124, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--relationship-blue);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.consent-button:hover {
  background: rgba(20, 74, 124, 0.1);
  border-color: rgba(20, 74, 124, 0.34);
}

@media (max-width: 640px) {
  .consent-inner {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 14px 0 16px;
  }

  .consent-actions {
    width: 100%;
  }

  /* The site's pill language is 38px; on a phone these two are the whole
     interaction, so they get the 44px target instead. */
  .consent-button {
    flex: 1 1 auto;
    min-height: 44px;
  }
}

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