/*
 * Product-neutral account access and plan-choice composition for the canonical
 * handled floating-window shell.
 */

.bb-floating-window:has(.bb-account-funnel) {
  width: min(440px, calc(100vw - 24px));
  min-width: min(320px, calc(100vw - 24px));
}

.bb-account-access-page {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 12px;
  place-items: center;
  color: var(--bb-interface-control-foreground);
  background: var(--bb-v2-color-surface-canvas);
  font-family: var(--bb-font-family-body);
}

.bb-account-access-page__loading {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  color: var(--bb-v2-color-content-secondary);
  background: var(--bb-v2-color-surface-canvas);
  font-family: var(--bb-font-family-body);
  font-size: var(--bb-font-size-sm);
}

html:has(.bb-account-access-page) body {
  margin: 0;
}

.bb-account-access-page__content {
  width: min(440px, 100%);
  min-width: 0;
}

.bb-account-access-page__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--bb-interface-control-foreground);
  font-size: var(--bb-font-size-lg);
  font-weight: var(--bb-font-weight-bold);
}

.bb-account-access-page__mark {
  display: block;
  width: 42px;
  height: 42px;
  color: var(--bb-v2-identity-primary);
}

.bb-account-access-page .bb-account-funnel {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bb-account-access-page .bb-floating-window-content__head {
  background: transparent;
}

.bb-account-funnel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  color: var(--bb-interface-control-foreground);
  background: var(--bb-interface-menu-background);
  font-family: var(--bb-font-family-body);
  -webkit-user-select: none;
  user-select: none;
}

.bb-account-funnel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: 0;
}

.bb-account-funnel__head .bb-floating-window-content__title {
  grid-column: 1;
  justify-self: center;
  width: auto;
}

.bb-account-funnel__back {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 16px;
  transform: translateY(-50%);
}

.bb-account-funnel__description {
  min-height: 0;
  padding-block: 8px 12px;
}

.bb-account-funnel__body .bb-form-fields {
  gap: var(--bb-spacing-3);
}

.bb-account-funnel__body .bb-field {
  margin: 0;
}

.bb-account-funnel__body :is(input, textarea, [contenteditable="true"]) {
  -webkit-user-select: text;
  user-select: text;
}

.bb-account-funnel__recovery {
  justify-self: end;
}

.bb-account-funnel__body .bb-checkbox-field {
  margin: 0;
}

.bb-account-funnel__switch {
  margin: 2px 0 0;
  color: var(--bb-interface-menu-muted-foreground);
  font-size: var(--bb-font-size-xs);
  line-height: var(--bb-font-line-height-normal);
  text-align: center;
}

.bb-account-funnel__switch-action {
  font-weight: var(--bb-font-weight-bold);
}

.bb-account-funnel__external-links {
  display: flex;
  justify-content: center;
  gap: var(--bb-spacing-4);
  font-size: var(--bb-font-size-xs);
}

.bb-account-funnel__error {
  margin: 0 16px 8px;
}

.bb-account-funnel__actions {
  padding: 6px 16px 12px;
}

.bb-account-funnel__actions .bb-workspace-control-button {
  min-width: 112px;
}

.bb-account-funnel__plans {
  display: grid;
  gap: var(--bb-spacing-3);
}

.bb-account-funnel__plan {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bb-spacing-3);
  padding: 12px;
  border: 1px solid var(--bb-interface-menu-border);
  border-radius: var(--bb-radius-md);
  color: var(--bb-interface-control-foreground);
  background: var(--bb-v2-color-surface-subtle);
  cursor: pointer;
}

.bb-account-funnel__plan:has(input:checked) {
  border-color: var(--bb-v2-identity-primary);
  background: var(--bb-interface-interaction-pressed-background);
  box-shadow: var(--bb-interface-interaction-pressed-shadow);
}

.bb-account-funnel__plan input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--bb-v2-identity-primary);
}

.bb-account-funnel__plan-copy {
  display: grid;
  gap: var(--bb-spacing-1);
  min-width: 0;
}

.bb-account-funnel__plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-spacing-3);
  font-size: var(--bb-font-size-sm);
}

.bb-account-funnel__plan-head strong {
  font-family: var(--bb-font-family-body);
  font-weight: var(--bb-font-weight-bold);
}

.bb-account-funnel__plan-summary,
.bb-account-funnel__plan-badge {
  color: var(--bb-interface-menu-muted-foreground);
  font-size: var(--bb-font-size-xs);
  line-height: var(--bb-font-line-height-normal);
}

.bb-account-funnel__plan-badge {
  color: var(--bb-v2-identity-primary);
  font-weight: var(--bb-font-weight-bold);
}

.bb-account-funnel--status {
  grid-template-rows: auto auto;
}

@media (max-width: 520px) {
  .bb-account-funnel__plan-head {
    display: grid;
    gap: var(--bb-spacing-1);
  }

  .bb-account-funnel__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bb-account-funnel__actions .bb-workspace-control-button {
    width: 100%;
  }
}