/*
 * The analytics banner and its on/off control (D217) —
 * app/views/shared/_analytics_consent.html.erb and _analytics_control.html.erb.
 *
 * A sticky slot at the END of the shell's content column, never fixed. Sticky
 * keeps its own space in the flow: the banner floats at the foot of the screen
 * while content continues below it, and sits after the last control once the
 * page is scrolled to the end. A fixed banner would permanently cover whatever
 * lands under it — a sticky CTA, a form's submit button, the last row.
 *
 * The card is `.ui-raised` (D29): tinted wash, brighter border, blur. No shadow.
 */

.analytics-consent {
  position: sticky;
  z-index: var(--z-banner);
  margin-top: var(--space-6);
}

.analytics-consent__card {
  padding: var(--space-4);
}

.analytics-consent__title {
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-leading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.analytics-consent__body {
  margin-top: var(--space-2);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.analytics-consent__body a {
  color: var(--text-gold);
}

.analytics-consent__actions {
  margin-top: var(--space-4);
}

/* The player's 393 column. Signed out there is no tab bar (sign-in, the
   privacy policy), so the card sits at the foot of the screen; only where the
   bar is drawn is it lifted clear of it. In the native app the shell draws its
   own tab bar outside the web view, and no .ui-tabbar is rendered. */
.analytics-consent--player {
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}

.shell--player:has(.ui-tabbar) .analytics-consent--player {
  bottom: calc(var(--tabbar-height) + var(--space-3) + env(safe-area-inset-bottom, 0px));
}

.hotwire-native .analytics-consent--player {
  bottom: calc(var(--space-3) + var(--native-inset-bottom));
}

/* The admin content column: a card at the bottom-right, a phone's width. */
.analytics-consent--admin {
  bottom: var(--space-5);
  margin-left: auto;
  max-width: var(--shell-player-width);
}

/* Above the club admin's bottom bar on a phone. */
@media (max-width: 767px) {
  .shell--club .analytics-consent--admin {
    bottom: calc(var(--tabbar-height) + var(--space-3) + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
}

.analytics-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.analytics-control__state {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--text-secondary);
}