/* The analytics question (js/consent.js). A card standing on the page's ground at the foot of the
   screen, as every object on the ground does: --raise-2 and the page's hairline, rounded. On a phone
   it spans the width above the thumb's reach of the page; wider, it keeps to the start corner and a
   reading measure. It is kept small (his word, 27 September 2026: "it's too large"): a question the
   visitor answers once should not stand over the page's first screen, least of all on a phone. Accept and Decline are one size and one weight, the page's quiet pill both, so
   neither is the easy one: the answer is the visitor's. */
.consent {
  position: fixed; z-index: 60; inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
  padding: 11px 12px 10px; border-radius: 14px; background: var(--raise-2); color: var(--fg);
  box-shadow: 0 0 0 1px var(--hair-2), 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translateY(12px); transition: opacity 0.2s, transform 0.3s var(--ease);
}
.consent.shown { opacity: 1; transform: none; }
.consent-words { margin: 0 0 9px; font: 12.5px/1.45 var(--sans); color: var(--fg-2); }
.consent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.consent-btn {
  flex: 1 1 0; min-width: 6em; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--fg); font: 500 13.5px/1 var(--sans);
  box-shadow: inset 0 0 0 1px var(--hair-2); transition: background 0.2s, box-shadow 0.2s;
}
.consent-btn:hover { background: color-mix(in oklab, var(--snow) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--snow) 30%, transparent); }
.consent-btn:focus-visible, .consent-more:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.consent-more { flex: 0 0 auto; padding: 0 6px; font: 11.5px/1 var(--mono); color: var(--fg-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2); }
.consent-more:hover { color: var(--fg-2); }
@media (min-width: 641px) {
  .consent { inset: auto auto 16px 16px; width: min(360px, calc(100vw - 32px)); }
  [dir="rtl"] .consent { inset: auto 16px 16px auto; }
  .consent-btn { flex: 0 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }