/* The consent banner.
 *
 * Its own stylesheet, drawn over whatever theme a site runs and inheriting
 * nothing from it - the same reasoning as the reading panel's. Everything is
 * prefixed `ay-consent` so nothing a theme writes can collide with it.
 *
 * The one rule that is not decoration: the three answers are the same button.
 * Same size, same weight, same colour, same row. Making "accept" prettier
 * than "reject" is the most common way a consent banner stops being consent,
 * and here it is not expressible
 * (specs/features/privacy-consent-analytics.md 4).
 */

.ay-consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2147483000;
  display: flex;
  justify-content: center;
  padding: 1rem;
  color-scheme: light dark;
}

.ay-consent-sheet {
  box-sizing: border-box;
  width: min(46rem, 100%);
  max-height: 80dvh;
  overflow-y: auto;
  padding: 1.25rem;
  border: 1px solid rgb(0 0 0 / 0.14);
  border-radius: 0.875rem;
  background: #fff;
  color: #16181d;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.22);
  font: 400 0.9375rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ay-consent-title {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

.ay-consent-lede { margin: 0; color: #4a4f59; }
.ay-consent-policy { color: inherit; }
.ay-consent-policy:focus-visible { outline: 3px solid #1668dc; outline-offset: 2px; }

.ay-consent-choices {
  display: grid;
  gap: 0.75rem;
  margin-block: 1rem 0;
  padding-block: 1rem 0;
  border-block-start: 1px solid rgb(0 0 0 / 0.1);
}

.ay-consent-choice { display: flex; gap: 0.625rem; align-items: start; }
.ay-consent-choice input { margin-block-start: 0.3rem; width: 1rem; height: 1rem; }
.ay-consent-choice-name { display: block; font-weight: 600; }
.ay-consent-choice-help { display: block; color: #4a4f59; font-size: 0.875rem; }
.ay-consent-choice-cookies { display: block; color: #6a707c; font-size: 0.8125rem; }

.ay-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1.125rem;
}

/* One button, three times. See the note at the top of this file. */
.ay-consent-button {
  flex: 1 1 10rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid #16181d;
  border-radius: 0.5rem;
  background: #16181d;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ay-consent-button:hover { background: #2b2f38; border-color: #2b2f38; }
.ay-consent-button:focus-visible { outline: 3px solid #1668dc; outline-offset: 2px; }

.ay-consent-reopen {
  position: fixed;
  inset-block-end: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 2147482000;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgb(0 0 0 / 0.18);
  border-radius: 999px;
  background: #fff;
  color: #16181d;
  font: 500 0.8125rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.16);
  cursor: pointer;
}

.ay-consent-reopen:focus-visible { outline: 3px solid #1668dc; outline-offset: 2px; }

/* Announced, not seen. */
.ay-consent-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .ay-consent-sheet { background: #16181d; color: #f2f3f5; border-color: rgb(255 255 255 / 0.16); }
  .ay-consent-lede, .ay-consent-choice-help { color: #b6bcc6; }
  .ay-consent-choice-cookies { color: #949ba6; }
  .ay-consent-choices { border-block-start-color: rgb(255 255 255 / 0.14); }
  .ay-consent-button { background: #f2f3f5; border-color: #f2f3f5; color: #16181d; }
  .ay-consent-button:hover { background: #fff; border-color: #fff; }
  .ay-consent-reopen { background: #16181d; color: #f2f3f5; border-color: rgb(255 255 255 / 0.2); }
}

@media (prefers-reduced-motion: no-preference) {
  .ay-consent-sheet { animation: ay-consent-in 160ms ease-out; }
}

@keyframes ay-consent-in {
  from { transform: translateY(0.75rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}