/* DRY_RUN-only chrome: the global "fake gateways" banner, the inline
 * "mocked value" hint pills, and the persona sign-in shortcuts. None of
 * this renders in production. */

.dry-run-banner {
  @apply sticky top-0 z-50 flex justify-center gap-2 border-b border-amber-500 bg-amber-200 px-4 py-2 text-sm font-medium text-amber-900;

  & .pill {
    @apply inline-block shrink-0 rounded-md bg-amber-800 px-2 py-0.5 text-xs font-bold uppercase tracking-wider text-amber-50;
  }
}

.mocked-value-hint {
  @apply relative ml-2 inline-flex cursor-help items-center gap-1 rounded-md border border-dashed border-amber-500 bg-amber-100 px-2 py-0.5 align-middle text-xs font-medium text-amber-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500;

  &::before {
    content: "mocked";
    @apply font-bold uppercase tracking-wide;
  }

  /* Custom popover injected by the dry-run-hint Stimulus controller. */
  & .tooltip {
    @apply absolute top-full left-0 z-50 mt-1 min-w-max max-w-xs rounded-md border border-amber-500 bg-amber-50 px-2 py-1 text-xs font-normal normal-case tracking-normal text-amber-900 shadow-md;
  }
}

/* Persona sign-in shortcut panel on the login screens. */
.dry-run-sign-in {
  @apply mt-8 rounded-md border-2 border-dashed border-amber-500 bg-amber-50 p-4;

  & h2 {
    @apply mb-1 text-sm font-semibold uppercase tracking-wide text-amber-900;
  }

  & p {
    @apply mb-3 text-xs text-amber-900;
  }

  & .personas {
    @apply grid auto-rows-fr grid-cols-1 gap-2 sm:grid-cols-2;
  }

  & .persona {
    @apply h-full w-full rounded-md border border-amber-500 bg-white px-3 py-2 text-left text-sm font-medium text-amber-900 hover:bg-amber-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500;

    & .label {
      @apply block;
    }

    & .email {
      @apply block text-xs font-normal text-amber-800;
    }
  }
}

/* Inline explainer beneath a DRY_RUN sign-in button. */
.dry-run-note {
  @apply mt-4 text-sm text-slate-700;
}