/* The consent panel, shared by every page that can write a cookie.

   It lives in its own file rather than in site.css because the legal pages load
   page.css instead, and the panel has to look the same on all four. Both parent
   stylesheets define the tokens used below, so this file declares no color of its
   own and can be loaded after either one.

   Not a modal: it never covers the page and it never blocks reading. The visitor
   can ignore it and keep scrolling, because nothing is stored while it waits. */

/* The container spans the full width only to center the panel. The pointer goes
   straight through it, or an invisible strip would eat every click along the
   bottom of the window. */
.consent[hidden] {
  display: none;
}

/* The script moves the keyboard here when the panel opens, and both stylesheets
   draw an outline around whatever holds focus. That outline would trace this
   container, which is the full width of the window and invisible. It is dropped
   only here: the visitor did not ask for this focus, and the panel appearing is
   already the signal that something happened. The two buttons inside keep their
   outline, which is what a keyboard user actually needs. */
.consent:focus {
  outline: none;
}

.consent {
  --consent-max-width: 560px;
  --consent-inset: 20px;
  --consent-pad: 22px;
  --consent-gap: 12px;

  /* Two pixels, like every other corner on the site. The panel used to be
     rounded at 14px with its buttons at 8px, which was two more radii than the
     design system has. It names its own value rather than reading --radius,
     because the legal pages still set that token to their own number. */
  --consent-radius: 2px;

  position: fixed;
  left: var(--consent-inset);
  right: var(--consent-inset);
  bottom: var(--consent-inset);
  z-index: 200;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.consent-panel {
  pointer-events: auto;
  width: 100%;
  max-width: var(--consent-max-width);
  padding: var(--consent-pad);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--consent-radius);
  box-shadow: 0 10px 34px rgba(var(--scrim), 0.18);
}

.consent-title {
  margin: 0 0 8px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}

.consent-text {
  margin: 0 0 var(--consent-pad);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--muted);
}

.consent-actions {
  display: flex;
  gap: var(--consent-gap);
}

/* Same width, same height, same radius, same weight for both. Only the fill
   changes, and the change does not make one of them louder than the other. */
.consent-button {
  flex: 1;
  padding: 11px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--consent-radius);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out;
}

.consent-button--reject {
  background: var(--surface);
  color: var(--accent);
}
.consent-button--reject:hover {
  background: var(--accent-wash);
}

.consent-button--accept {
  background: var(--accent);
  color: var(--surface);
}
.consent-button--accept:hover {
  background: var(--accent-deep);
}

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

/* The footer entry that reopens the panel. It is a button because it goes
   nowhere, and a button carries its own background, border and font, so all
   three are cleared here. The color is deliberately left alone: each page hands
   it the one its own footer links use.

   It sits in the footer's legal column and has to read as one of those links.
   Note what is *not* cleared: the size. A button carries a font-size of its
   own, but `font-size: inherit` would take the column's size rather than the
   14px of the links beside it, which is how this ended up a size too large
   twice. Leaving it alone lets .footer-link set it, as it does for the rest. */
.consent-reopen {
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}