[data-analytics-consent][hidden] {
  display: none;
}
[data-analytics-consent] {
  position: fixed;
  z-index: 1000;
  inset: auto 16px 16px auto;
  max-width: min(420px, calc(100vw - 32px));
  color: var(--consent-text, #24231f);
  font:
    15px/1.5 system-ui,
    sans-serif;
}
[data-analytics-consent] section {
  padding: 20px;
  border: 1px solid var(--consent-border, #e4e1da);
  border-radius: 12px;
  background: var(--consent-surface, #fffefa);
}
[data-analytics-consent] h2 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-size: 18px;
}
[data-analytics-consent] p {
  margin: 0 0 12px;
}
[data-analytics-consent] a {
  color: inherit;
  text-underline-offset: 3px;
}
[data-analytics-consent] .analytics-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
[data-analytics-consent] button {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
[data-analytics-consent] button:disabled {
  opacity: 0.6;
  cursor: default;
}
[data-analytics-consent] :focus-visible,
[data-privacy-settings]:focus-visible {
  outline: 2px solid var(--consent-focus, #b04a24);
  outline-offset: 3px;
}
/* On a phone the card covered a third of the first screen; a bottom strip keeps both
   actions at full size in less height. */
@media (max-width: 600px) {
  [data-analytics-consent] {
    inset: auto 0 0 0;
    max-width: none;
  }
  [data-analytics-consent] section {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: 12px 12px 0 0;
  }
  [data-analytics-consent] h2 {
    margin-bottom: 4px;
    font-size: 16px;
  }
  [data-analytics-consent] p {
    margin-bottom: 0;
  }
  [data-analytics-consent] .analytics-actions {
    margin-top: 10px;
  }
}