/* ===== Cookie consent (#278) ===== */

/* A band at the bottom rather than a modal over everything: the page stays
   readable and usable while the question is open, which is the difference
   between asking and blocking. */
.consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--toddyi-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--toddyi-size-0-5rem);
  padding: var(--toddyi-size-1rem);
  background: var(--pico-card-background-color);
  border-block-start: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  box-shadow: var(--toddyi-card-shadow);
}

.consent__title { margin: 0; font-size: var(--toddyi-size-1-1rem); }
.consent__body { margin: 0; font-size: var(--toddyi-size-0-9rem); max-inline-size: var(--toddyi-size-42rem); }
.consent__links { margin: 0; font-size: var(--toddyi-size-0-85rem); }
.consent__link { color: var(--pico-primary); }

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--toddyi-size-0-75rem);
  margin-block-start: var(--toddyi-size-0-25rem);
  /* Capped so the two never stretch across a wide screen, which would make the
     one nearer the reading edge the obvious choice. */
  max-inline-size: var(--toddyi-size-24rem);
}

/* Both buttons, one class. Accept and reject differ in what they do and in
   nothing else — a reject that is quieter than accept is not a free choice,
   and a choice that is not free is not consent. */
.consent__button {
  flex: 1 1 var(--toddyi-size-8rem);
  padding: var(--toddyi-size-0-5rem) var(--toddyi-size-1rem);
  font-size: var(--toddyi-size-0-9rem);
  border-radius: var(--toddyi-size-0-375rem);
  border: var(--toddyi-size-1px) solid var(--pico-primary);
  background: var(--pico-card-background-color);
  color: var(--pico-primary);
  cursor: pointer;
}

.consent__button:hover { background: var(--pico-secondary-background); }

/* `hidden` is a UA-stylesheet rule, and any author `display` beats it whatever
   the specificity — origin wins before specificity is consulted. Without this
   the banner is on screen from first paint and el.hidden = true does nothing. */
.consent[hidden], .consent-reopen[hidden] { display: none; }