/* The statistics banner (Look A, docs/design/menus-look-a.md): a bar fixed at the bottom inside the safe areas. Allow and
   Decline are the same .tl-consent-btn, so they weigh the same. The notice bar of opt-out regions (.tl-notice, one line
   with OK and Privacy choices) is the same bar and the same buttons; stats.js shows only one of the two. It is fixed and starts hidden, so it never moves the layout.
   Its own bottom padding reads the bare env() inset, never --safe-b: stats.js feeds the banner's height into
   --tl-inset-bottom, which --safe-b includes, and that would make it grow without end. */
.tl-consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 10000;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px));
  padding-inline: calc(16px + var(--safe-l, env(safe-area-inset-left, 0px))) calc(16px + var(--safe-r, env(safe-area-inset-right, 0px)));
  background: #1a130d;
  border-block-start: 1px solid #4a3a26;
  color: #f3e7d0;
  font: 0.95rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.tl-consent[hidden] {
  display: none;
}

.tl-consent-copy {
  flex: 1 1 320px;
}

.tl-consent p {
  margin: 0;
}

.tl-consent p + p {
  font-size: 0.88rem;
  color: #b8a68a;
}

.tl-consent a {
  color: #f3e7d0;
}

.tl-consent-btn {
  box-sizing: border-box;
  min-block-size: 44px;
  min-inline-size: 96px;
  padding: 0 20px;
  border: 2px solid #c8963e;
  border-radius: 8px;
  background: transparent;
  color: #f3e7d0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.tl-consent-btn:hover {
  background: #2a1f13;
}

.tl-consent-btn:focus-visible,
.tl-consent a:focus-visible {
  outline: 3px solid #ffc44d;
  outline-offset: 2px;
}

/* Phones: the first line, the policy link beside it and the two buttons side by side, about 100 px, so the game above
   it stays usable. The detail is on the privacy page and in Settings. */
@media (max-width: 519.98px) {
  .tl-consent {
    gap: 8px;
    padding-block: 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .tl-consent-copy {
    flex-basis: 100%;
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .tl-consent p {
    display: inline;
  }

  .tl-consent p + p {
    margin-inline-start: 4px;
    font-size: inherit;
  }

  .tl-consent-detail {
    display: none;
  }

  .tl-consent-btn {
    flex: 1 1 40%;
  }
}

/* The page's last lines stay reachable above the banner. */
.site-foot {
  padding-block-end: calc(40px + var(--tl-inset-bottom, 0px));
}