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

/* A card in the corner, not a band across the page.
   It used to be `inset-inline: 0` with a hairline on top: a full-bleed slab
   that took the bottom fifth of every viewport, squared off against the
   rounded cards it sat on, and cut the section underneath it in half. Nothing
   about it said "this is a dialog" — it read as the page failing to lay out.
   Bounded, lifted off the page and rounded like every other surface here, it
   reads as something addressed to you, and it covers a corner instead of a
   section. (#358) */
.consent {
  position: fixed;
  inset-inline-start: var(--toddyi-size-16px);
  inset-inline-end: auto;
  inset-block-end: var(--toddyi-size-16px);
  z-index: var(--toddyi-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--toddyi-size-0-5rem);
  max-inline-size: var(--toddyi-size-24rem);
  padding: var(--toddyi-size-18px) var(--toddyi-size-20px);
  background: var(--surface);
  border: var(--toddyi-size-1px) solid var(--border);
  border-radius: calc(var(--radius) + var(--toddyi-size-2px));
  box-shadow: var(--shadow-lg);
  color: var(--toddyi-text-body);
}

.consent__title {
  margin: 0;
  font-size: var(--toddyi-size-1-05rem);
  font-weight: 800;
  color: var(--primary);
}

/* Fifteen languages do not write this paragraph at the same length — the
   German one is half again as long as the Japanese. The card is bounded, so
   the text wraps rather than widening it, and the reserve below is measured
   from what it actually became. (#358) */
.consent__body {
  margin: 0;
  font-size: var(--toddyi-size-0-85rem);
  line-height: 1.7;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.consent__links { margin: 0; font-size: var(--toddyi-size-0-8rem); }
.consent__link { color: var(--toddyi-primary); }

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--toddyi-size-10px);
  margin-block-start: var(--toddyi-size-4px);
}

/* Both buttons, one class. Accept and refuse differ in what they do and in
   nothing else — a refuse that is quieter is not a free choice. */
.consent__button {
  flex: 1 1 var(--toddyi-size-8rem);
  padding: var(--toddyi-size-10px) var(--toddyi-size-16px);
  font-size: var(--toddyi-size-0-88rem);
  font-weight: 700;
  border-radius: var(--toddyi-size-12px);
  border: var(--toddyi-size-1px) solid var(--toddyi-primary);
  background: transparent;
  color: var(--toddyi-primary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.consent__button:hover {
  background: var(--toddyi-primary);
  color: var(--text-on-dark);
}

/* The card floats, so the page has to end above it. Without this the footer
   sits under the card and there is no scroll position that reveals it —
   "does not obscure the page" is not a thing a fixed element can claim on its
   own. consent.js measures the card and publishes its height here, because
   the height is a translation, not a constant. (#358) */
.doc-body--consent {
  padding-block-end: calc(var(--toddyi-consent-block-size, var(--toddyi-size-zero)) + var(--toddyi-size-32px));
}

/* Small, out of the way, and always reachable: withdrawing consent must not be
   harder than giving it, but it does not need to shout either. */
.consent-reopen {
  position: fixed;
  inset-block-end: var(--toddyi-size-0-5rem);
  inset-inline-start: var(--toddyi-size-0-5rem);
  z-index: var(--toddyi-z-toast);
  padding: var(--toddyi-size-0-25rem) var(--toddyi-size-0-6rem);
  font-size: var(--toddyi-size-0-75rem);
  border-radius: var(--toddyi-size-999px);
  border: var(--toddyi-size-1px) solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

/* `hidden` is a UA-stylesheet rule, and any author `display` beats it whatever
   the specificity — so the banner above was on screen from first paint and
   stayed there after a choice was made. The attribute needs saying again here
   for it to mean anything. */
.consent[hidden], .consent-reopen[hidden] { display: none; }