/* Shared by the standalone page and the embedded questionnaire dialog. */
:is(.access-modal, .ios-embedded-access) .modal-scroll {
  padding-bottom: 0;
}

:is(.access-modal, .ios-embedded-access) .access-controls {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--bb-line, #e3e7ec);
  background: var(--bb-surface, #fff);
  box-shadow: 0 -8px 12px var(--bb-surface, #fff);
}

:is(.access-modal, .ios-embedded-access) .access-controls .button {
  min-height: 48px;
  height: auto;
  margin: 0;
  padding: 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Do not fade the label while waiting, or inherit the global primary hover. */
:is(.access-modal, .ios-embedded-access) .button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

:is(.access-modal, .ios-embedded-access) .button-primary {
  background: #9c0e4d;
  color: #fff;
}

:is(.access-modal, .ios-embedded-access) .button-primary:hover:not(:disabled) {
  background: #76083a;
}

:is(.access-modal, .ios-embedded-access) .button-secondary {
  border-color: var(--bb-line, #e3e7ec);
  background: var(--bb-surface, #fff);
  color: var(--bb-ink, #251d23);
}

:is(.access-modal, .ios-embedded-access) .button-secondary:hover:not(:disabled) {
  background: var(--bb-soft, #f8edf3);
  color: var(--bb-ink, #251d23);
}

:is(.access-modal, .ios-embedded-access) .access-controls :is(.inline-status, .action-status) {
  min-height: 0;
  max-height: min(8em, 22dvh);
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  background: var(--bb-soft, #f8edf3);
  color: var(--bb-ink, #251d23);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

:is(.access-modal, .ios-embedded-access) .access-controls .inline-status:empty {
  display: none;
}