/*
  The cookie banner.

  Self-contained, and that is the one unusual thing about this file. Every
  other stylesheet here belongs to one palette — `app.css` is dark, dense and
  sign-brown for a windscreen, `landing.css` is warm paper for a sofa — and
  this banner appears over both. Reaching for either token set would make it
  correct on half the site, so it carries its own colours and its own dark
  mode.
*/

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /*
    Above the pinned player. The app reserves 11rem at the bottom of the body
    for the transport bar, so a banner at any ordinary stacking level appears
    underneath the one thing on that screen somebody presses without looking.
  */
  z-index: 9999;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.5rem;

  padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
  background: #1B1815;
  color: #E9E4DA;
  border-top: 1px solid #3A332B;
  box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .8);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: .88rem;
  line-height: 1.45;
}

.consent-text {
  margin: 0;
  max-width: 46ch;
  color: #C9C2B6;
}
.consent-text a {
  color: #E9E4DA;
  text-underline-offset: .18em;
}

.consent-acts {
  display: flex;
  gap: .55rem;
  flex: none;
}

/*
  The two buttons weigh the same.

  A large "Allow" beside a grey line of text saying "manage preferences" is the
  pattern every regulator has named, and it is also just dishonest: the whole
  point of asking is that either answer is a real answer. They differ in
  colour, not in size, and both are large enough to press on a phone.
*/
.consent-btn {
  font: inherit;
  font-weight: 600;
  padding: .55rem 1.1rem;
  min-height: 2.5rem;
  border-radius: 3px;
  border: 1px solid #574E42;
  background: transparent;
  color: #E9E4DA;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}
.consent-btn:hover { background: #2A241E; }
.consent-btn--yes {
  background: #E9E4DA;
  border-color: #E9E4DA;
  color: #1B1815;
}
.consent-btn--yes:hover { background: #fff; border-color: #fff; }

.consent-btn:focus-visible,
.consent-text a:focus-visible {
  outline: 2px solid #C98A4B;
  outline-offset: 2px;
}

/* A phone: the buttons go full width rather than shrinking to ellipses. */
@media (max-width: 34rem) {
  .consent { justify-content: stretch; }
  .consent-acts { width: 100%; }
  .consent-btn { flex: 1; }
}

/*
  The way back, once a choice has been made. Hidden until consent.js reveals
  it, so a page with no analytics tag never shows a link to a banner that will
  not appear.
*/
[data-consent-open] { cursor: pointer; }