/* The statistics banner and the opt-out bar (banner.js): a card fixed to the bottom inside the safe areas, in the site's colours
   (the tokens of /_style.css, with fallbacks for the demo page, which has its own style). Allow and Decline are the same
   .stats-btn, so they weigh the same. It uses no inline style and nothing from outside. */
.stats-banner { position: fixed; inset-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)); inset-block-end: max(8px, env(safe-area-inset-bottom, 0px));
  z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: 880px; margin-inline: auto; padding: 14px 16px; box-sizing: border-box;
  background: var(--panel, #f8f4ea); color: var(--ink, #2b2218); border: 2px solid var(--ink, #2b2218); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(43, 34, 24, 0.22); font: 500 15px/1.4 ui-rounded, "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.stats-banner[hidden] { display: none; }
.stats-copy { flex: 1 1 320px; max-width: 70ch; }
.stats-copy b { font-weight: 800; }
.stats-banner a { color: var(--link, #8a3a00); text-underline-offset: 3px; }
.stats-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.stats-btn { min-block-size: 44px; min-inline-size: 104px; padding: 0 18px; border: 2px solid var(--ink, #2b2218); border-radius: 14px; background: var(--accent, #f0b44c); color: var(--ink, #2b2218);
  font: inherit; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.stats-btn:hover { background: #f6c76f; }
.stats-btn:focus-visible, .stats-banner a:focus-visible { outline: 3px solid var(--link, #8a3a00); outline-offset: 2px; }
/* The site's footer ends above the bar while one shows. */
.foot { padding-block-end: var(--tf-bar-h, 0px); }
/* The demo page's own two links, at the bottom centre: the tools are at one side and the demo mark in a corner, so the centre is free whichever side the tools
   dock on. The strip takes no touch (the painting under it still works); only its two links do. */
.stats-links { position: fixed; inset-inline-start: 50%; translate: -50% 0; inset-block-end: max(4px, env(safe-area-inset-bottom, 0px)); z-index: 5; margin: 0; padding: 2px 10px; white-space: nowrap;
  font: 600 12px/1.3 ui-rounded, system-ui, sans-serif; background: rgba(248, 244, 234, 0.9); color: #2b2218; border-radius: 8px; pointer-events: none; }
.stats-links a { color: #8a3a00; pointer-events: auto; }
@media (max-width: 519.98px) {
  .stats-banner { gap: 8px; padding: 12px; font-size: 14px; }
  .stats-copy { flex-basis: 100%; }
  .stats-actions { flex: 1 1 100%; }
  .stats-btn { flex: 1 1 40%; }
}